9 replies [Last post]
rev_shabbazz
Offline
Regular
Last seen: 15 years 45 weeks ago
Joined: 2005-04-22
Posts: 23
Points: 0

Hi all,

I am a newbie to this site and a newbie to CSS based design. I have used CSS plenty in the past with site-wide fonts (etc) , but I am attempting my first complete css driven design.

I thought I had a pretty good grasp on the topic until I looked at my page in IE. Ugh! It looks terrible!

I extracted my major trouble spot and hope you can help me concentrate on this and squash a few ugly bugs.

The site-snippet is located here ::
http://www.shakedownstreet.com/testing/index.php

It is a very small snippet of my secondary navigation. In Firefox and Netscape 7, everything looks fine. In IE, it is a mess!

The three biggest problems I need to fix are :

(1) the yellow Div box is way too wide in IE
(2) the ul options completely cover up my first header
(3) IE seems to choke on the display box for my menu link. In FF, the entire button is a hotlink. In IE, only the text is a link.

Can you please point me in the right direction to help me figure out why IE is chocking on my styles? I'm at a loss.

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you all please offer me some direction here

First thing you need is 'display:inline' on the #secondary rule set as your falling foul of the IE 'Double Margin Bug' that happens when you have a margin on the same side as the direction the float is going in and where the float is abutted against the extreame edge, IE will double the margin set in the rules.

The wider #secondary div in IE is due to the way IE expands a div incorrectly, your ul is pushing out to the right, you need to zero the inherit left margin and padding that the ul has (although in this case probably just the left margin as this is what IE uses on a ul element, but safer to do both) then you will find the ul fitting the width correctly.

I would loose the 'position: relative; top: -14px; left: -40px;' rule, it's not needed, the ul should naturally take position below the #header
also the float: left on the li element isn't needed either.

Your hover problem is another little IE quirk, add 'position:relative' to the '#main #secondary li a' as well as the display block and you should find that the link is clickable over the full width.
the lack of background/img on hover is due to the fact that you have a property directly against the last brace of the url, IE needs to see a space there i.e 'con.jpg) left' not 'con.jpg)left'.


One thing to watch is that you have used #header twice which isn't allowed they are unique and must only be used once per page, change it to a class.

Hope that helps,

Hugo.

Edited error pointed out in first line, which read "#secondary ul" instead of "#secondary".

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Can you all please offer me some direction here

You have a number of errors in your code, that effect IE more than FF.

  • the html comment above <div id='secondary'> is incorrect. html comments must start <!-- and end -->
  • IE expects a space after the closing parenthesis of the url(...). In two cases you are missing that space.
  • You seem to have unnecessary float:lefts and position:relative on elements contained withing #secondary. they can be dropped.
  • Per Hugo, you shouldn't have multiple occurrences of the same id. It would make sense to use a header element in any case, say <h2> and style them by #secondary h2 {...}
  • Also per Hugo and IE double margin bug. I am unclear on how to make it go away, so I just stuck an IE only hack {_margin-left:15px} to overcome the problem.

If you make all those changes + throw in a padding-bottom on #secondary ul everything will be similar between IE and FF.

See the end result here

I still think there are issues with you floating the elements within #main (e.g. #main p). It makes more sense to wrap them in another div, give that div a margin sufficient to keep it away from your #secondary. I have called it #content in the above page.

Lastly, to overcome a slight issue in Firefox I have set the line-height of #background to 0.

[/]
rev_shabbazz
Offline
Regular
Last seen: 15 years 45 weeks ago
Joined: 2005-04-22
Posts: 23
Points: 0

Can you all please offer me some direction here

Shock

Wow -- I am totally floored by the level of your responses! I really can't thank you enough for steering me in the right direction and clearing up some of the troubles that have been plaguing me! A very sincere thank you to the both of you!

I really do appreciate it! I'm sure I'll be back around in the not so distant future with some more newbie questions!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 32 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Can you all please offer me some direction here

And as you learn, don't forget to come back and teach Wink

Life's a b*tch and then you die!

rev_shabbazz
Offline
Regular
Last seen: 15 years 45 weeks ago
Joined: 2005-04-22
Posts: 23
Points: 0

Can you all please offer me some direction here

>> And as you learn, don't forget to come back and teach

Fair is fair! Cool

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you all please offer me some direction here

Doubling up there a bit Chris Wink

The double margin bug is solved by adding 'Display:inline' to the offending float, it's mentioned in my first paragraph. Display inline has no consequence as floating an element causes it to become a block level one overriding the display inline, it just sorts IE out for what ever reason.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Can you all please offer me some direction here

Sorry, about that. Smile

I read your post as saying make the #secondary ul display:inline. I tried that and it didn't work. Your second post explains the double margin bug better and I can now see that it should go on #secondary. Sample page updated.

Most of the rest I had written as I worked my way through the page, I was just too lazy to delete the bits you had mentioned by the time I came to post.

I think we got there in the end Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you all please offer me some direction here

Sorry Chris, your quite right, I meant on the #secondary div, didn't intend the 'ul' to slip in there, not paying attention and thinking ahead too far as I wrote :roll: My bad (that's just to annoy Roy he doesn't like bad being misused Smile )

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 32 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Can you all please offer me some direction here

Hugo wrote:
My bad

Evil Wink

Life's a b*tch and then you die!