Menu bad in IE (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Brandon -> Menu bad in IE (1/23/2007 15:43:43)

Everything looks good in FF, but not in IE. Menu is out of place.

http://www.lawsondesignstudio.com/temp6/

Tailslide what do I do? [:)]



rdouglass -> RE: Menu bad in IE (1/23/2007 16:13:30)

Is it too high and intruding on the header?

Personally I think it's the margin/padding discrepancy between IE and other browsers.

I'd give somethinbg like this IE hack in your <head> section:

<!--[if lte IE 6]>
<style>
#menu
{
margin-top: 5px;
}
</style>
<![endif]-->

or something like that. That help any?



Tailslide -> RE: Menu bad in IE (1/23/2007 16:15:47)

blimey - no pressure eh?

Hang on a minute.



rdouglass -> RE: Menu bad in IE (1/23/2007 16:17:27)

quote:

Hang on a minute.


Hey, I gave you a half hour...[:D]



Tailslide -> RE: Menu bad in IE (1/23/2007 16:42:57)

I was watching Stargate ok? I have a habit of leaving the computer on and myself logged in here - I know, I'm single-handedly ruining the planet.

It appears to be an IE "haslayout" issue with the links in the menu div.

If you change the link rule to this: 

#menu ul li a
{
display:inline-block;
padding:1.2em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}


you get closer to the mark.

Only thing is that inline-block isn't valid CSS so you might want to stick that in a IE conditional Statement like Roger suggested - except that you need it to apply to IE7 too so try "if lte IE 7"



jurgen -> RE: Menu bad in IE (1/23/2007 17:24:08)

I don't think you need any conditionals to satisfy all browsers. Here is the code for the menu I would use.

quote:

#menu
{
background: #870014 url('images/menubg.gif') repeat-x top left;
padding-top: 0.1em;
padding-right: 1em;
padding-bottom: 0.1em;
padding-left: 1em;
}



Brandon -> RE: Menu bad in IE (1/23/2007 19:37:32)

hmm...none of these seemed to work. [:@]



jaybee -> RE: Menu bad in IE (1/23/2007 19:44:54)

I can't get at your host at them moment so I can't check it, might be an international router problem as quite a few sites are timing out on me. I'll take a look in the morning if nobody has come up with anything.

As I can't see your menu layout this may be way off the mark but sometimes if you replace your padding with borders or margins it gets you out of the hole.

[edit]ignore that, looking at the suggestions above that won't work.



Brandon -> RE: Menu bad in IE (1/23/2007 19:54:20)

OK well I put this in and it seems to work. So is there a better way to do this? Also what if I want it to work for IE 6 and IE 7, and can't I work this into my CSS? 

<!--[if lte IE 6]> 
<style> 
#menu ul
{ 
margin-top: 1.1em;
} 
</style> 
<![endif]-->



jurgen -> RE: Menu bad in IE (1/23/2007 19:59:40)

Seems to be working now. Looking good in FF and IE.... What did you do?


edit: never mind I saw your last post....



jurgen -> RE: Menu bad in IE (1/23/2007 20:09:14)

I still don't think you need a conditional statement..

Have a look at the site I am setting up right now. No conditionals, and it works on all browsers.....

test site



rdouglass -> RE: Menu bad in IE (1/23/2007 20:34:23)

quote:

I still don't think you need a conditional statement..


...but if you do need a conditional statement, it *must* go in the markup and not the external CSS. That doesn't work.



rdouglass -> RE: Menu bad in IE (1/23/2007 20:36:03)

quote:

I was watching Stargate ok?


Acceptable excuse. [;)]



jurgen -> RE: Menu bad in IE (1/23/2007 22:49:10)

quote:

ORIGINAL: rdouglass

quote:

I still don't think you need a conditional statement..


...but if you do need a conditional statement, it *must* go in the markup and not the external CSS. That doesn't work.


Question is: Do you realy "need" to use conditionals? If so, yes they should be in the html code......



rdouglass -> RE: Menu bad in IE (1/23/2007 23:32:48)

quote:

Question is: Do you realy "need" to use conditionals?


Yes that is the question but is best answered in a new thread.



Tailslide -> RE: Menu bad in IE (1/24/2007 2:31:52)

Ideally, don't use conditionals. They're better than hacks used within the stylesheet but not better than figuring it out without their use at all.

Often IE haslayout issues can only be dealt with using hacks of one kind or another as the solutions would either mess up the normal CSS or they're in themselves invalid for normal use.

To apply conditionals to IE7 and under add the statement I mentioned: 

<!--[if lte IE 7]>


Jurgen - you're solution may well work without conditionals (it was too late last night to go through many solutions!) - in which case it'd be the one to use. Just make sure it doesn't go beserk on text resizing.



jaybee -> RE: Menu bad in IE (1/24/2007 5:59:59)

I'm still unable to load your site, or any others apart from this one for some unknown reason so I can't look. Glad the margin thing worked though. I try to avoid using padding if I can get away with margin or border as it's always padding that trips IE up.



Brandon -> RE: Menu bad in IE (1/24/2007 8:15:53)

To bad jaybee your really missing out... [:)]

I also found I don't need the conditional statement if I use this: 
#menu ul
{
position: absolute;
top: 1.1em;
}

Instead of this: 
#menu ul
{
position: absolute;
}


However, I get the opposite affect...it looks good in IE but not in FF.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125