[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Problem with overlapping css sheets...

Posted on 2011-09-12
25
Medium Priority
?
302 Views
Last Modified: 2012-05-12
So here is the link to the problem page http://www.billsprice.com/index2.php

I added two jquery things, the autosuggest and the scroller with graphics.

They are running on two versions of jquery and i tried to change the scrollers css to different classes so it would look, however, this did not work.

Here is the reverted version, any thoughts on exactly what i need to change to make the scroller thing not look all screwed up?
0
Comment
Question by:blink10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 8
  • 2
  • +2
25 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 36528222
I just changed your css of myaccountdontdelete.css line no 1063 to like below :

#featured2 .ui2-tabs-panel {
    background: none ;
    height: 250px;
    margin-left: -20px;
    margin-top: -15px;
    position: relative;
    width: 390px;
}

Open in new window


So it seems ok in firefox please check in your
0
 

Author Comment

by:blink10
ID: 36530038
i just tried this but no luck.
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531319
To class .#featured2 UL.ui2-tabs-nav LI SPAN in file myaccountdontdelete.css
Add the following
width:95px;
word-wrap:break-word;
float:left;
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:blink10
ID: 36531472
i just added it, no luck
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531476
I just browser tested it and it did work.
What browser are u using?
0
 

Author Comment

by:blink10
ID: 36531481
all browsers, firefox, chrome, etc.
0
 

Author Comment

by:blink10
ID: 36531497
For reference I just changed it back to without the competting style sheet. It is almost back to how its suppose to long, minus, it suppose to highlight gray option on the right.
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531503
What stylesheet did u remove?
0
 

Author Comment

by:blink10
ID: 36531508
<link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531525
The options are gray on hover, what am I missing?
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 36531528
Page looks fine to me in IE8, FF 6, Chrome 13, and Opera 11.5
(positioning is waaay off in IE6).

What is broken?
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531542
IE6 does not hold to the normal browser standards, I would not expect the page to look correct in IE6, that is why Microsoft is trying to get rid of it...
http://www.ie6countdown.com/
0
 

Author Comment

by:blink10
ID: 36531544
@ melmc It was suppose to be gray on selected two

@ nap0leon I removed the competing stylesheet, which is why it looks normal
0
 

Author Comment

by:blink10
ID: 36531547
This isnt a IE issue, this is an all browser issue.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 36531578
Again.. what is broken?  The page looks fine and you did not really describe the error condition.
(you mentioned "autosuggest" and "scroller with graphics", which perhaps you already removed these.)

(and yes, the IE6 broken thing was in parenthesis b/c of course no one *should* be running IE6, but it is one that I happen to have to support at my company so I habitually look at it in that browser anyway)
0
 

Author Comment

by:blink10
ID: 36531587
Sorry, now i added the jquery style sheet back in. Now you can see how it messes up the scroller.
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531591
What does that mean? Do you mean the content is behind the scrollbar?
0
 

Author Comment

by:blink10
ID: 36531616
I mean it isnt using the original stylesheet, the jquery sheet is overwriting it and messing it up. Let me show u screenshots.

Before adding stylesheet http://www.billsprice.com/177.png
After adding http://www.billsprice.com/277.png

0
 
LVL 8

Expert Comment

by:MelMc
ID: 36531623
U need the original style sheet to load after the one that is messing it up. Change the order of your link tags.
0
 

Author Comment

by:blink10
ID: 36531648
ok now the original style sheet loads last, no luck however.
0
 
LVL 8

Accepted Solution

by:
MelMc earned 2000 total points
ID: 36531738
Make sure that you keep the original style sheet loading after the jquery one.
In the myaccountdontdelete.css do the following:
1. For Class #feature Delete height:245px;
2. Add class .ui-tabs .ui-tabs-panel{padding:0px;}
3. Add class .ui-tabs{padding:0px;}

Please put that in place, still working on the right column.
0
 

Author Comment

by:blink10
ID: 36531913
can you tell me what classes are overlapping and then ill just change the class names? Thats what I was trying to do orignally and couldnt determine.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 36546960
There appears to be confusion surrounding what "scroller" that you are referring to.  My suggestion would be to attach a .png screen shot that highlights what you are referring to, in order to provide a reasonable answer.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question