SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Website misbehaving in IE6
-
Apr 2, 2009, 10:01 #1
Website misbehaving in IE6
Anybody able to tell me why this (site is a mess in IE6?
Works fine in IE7 and 8, Firefox and Safari. Validates as well.
I do seem to have a stray > under the left hand menu. Can't work out where that has come from!!!!
Thanks in advance.
-
Apr 2, 2009, 10:31 #2
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
There are a number of issues on your site...just by looking at the CSS.
Code:*{margin:0;padding:0;}
Next, you need to contain your floats. Add overflow:hidden; to #container. This is the easiest way.
Code:float: left; margin: -160px 0 0 80px;
The same thing happens toCode:.image { float: left; margin: 10px;
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 2, 2009, 10:34 #3
- Join Date
- Nov 2008
- Location
- Dunstable, Bedfordshire, United Kingdom
- Posts
- 44
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You have it covered RyanReese! It's the dreaded double float margin bug. You could use conditional statement for ie to isolate the issue.
Moodey IT offer Website Design and Search Engine Optimisation
-
Apr 2, 2009, 10:36 #4
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
No, as said before it is easy to fix. Read the article. All you need to do is add display:inline; to the floated element.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 2, 2009, 13:34 #5
Ryan,
Thanks for the response. I have inserted the code you suggested but things still do not look right in IE6. The content area still moves down and across to the left. And the left nav bar disappears when hovered over.
It's a pain but I need to get this right in IE6 as it is still widely used in this organisation.
Thanks.
-
Apr 2, 2009, 15:27 #6
Hi,
The current problem has nothing to do with the #content div. The problems are in the nav.
Remove the display:block on the ul#nav, it is overriding the inline fix for IE6.
Then replace the display:block with a left float on the ul#nav li a
Those two changes will snap everything in place in IE6
Code:ul#nav { float: left; margin: -160px 0 0 80px; width: 180px; height: 306px; display: inline; /*display: block;*/ background:red url(../graphics/left_nav.jpg) no-repeat; } ul#nav li { list-style-type: none; margin: 0; } ul#nav li a { border: 0; float:left; /*was display:block;*/ background: url(../graphics/left_nav.jpg) no-repeat; text-indent: -9999px; }
Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Apr 2, 2009, 15:37 #7
It looks like you will need to slightly readjust your background positions on the anchors when using the float though.
Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Apr 2, 2009, 15:37 #8
Rayzur,
Fantastic - that works a treat.
I have one more problem in IE6 with the left navigation.
If you hover over the navigation it starts jumping around - it gets worse the lower you go.
If I remove the background image from ul#nav the image disappears briefly before the hover state shows up.
Neither of these is ideal. Can you or anybody else advise on this issue?
-
Apr 2, 2009, 15:53 #9
Ignore that last bit I have sorted it out. Changed the height on the individual 'a' elements in the nav list. Weird how it worked ok in FF, IE 7 and 8 before and after I made this change. Works in IE6 now but there is a delay before the hover state works. I can live with that though!
-
Apr 2, 2009, 15:58 #10
Here is a cross browser workaround. I had some code here previously but scrapped it. The problem was the display:inline; on the ul#nav for IE6. By removing the left margin off 80px and positioning it relative to itself we can remove the IE6 fix and get consistency without the inline display interfering.
Code:ul#nav { float:left; margin: -160px 0 0 0; position:relative; left:80px; width: 180px; height: 306px; background: url(../graphics/left_nav.jpg) no-repeat; } ul#nav li { list-style-type: none; margin:0; padding:0; } ul#nav li a { border: 0; display:block; background: url(../graphics/left_nav.jpg) no-repeat; text-indent: -9999px; } li#nav01 a { width: 180px; height: 42px; } li#nav02 a, li#nav03 a, li#nav04 a, li#nav05 a, li#nav06 a, li#nav07 a, li#nav08 a { width: 180px; height: 30px; } li#nav09 a { width: 180px; height: 61px; } li#nav01 a:link, li#nav01 a:visited { background-position: 0px 0px; } li#nav01 a:hover { background-position: -180px 0px; } li#nav02 a:link, li#nav02 a:visited { background-position: 0px -42px; } li#nav02 a:hover { background-position: -180px -42px; } li#nav03 a:link, li#nav03 a:visited { background-position: 0px -71px; } li#nav03 a:hover { background-position: -180px -71px; } li#nav04 a:link, li#nav04 a:visited { background-position: 0px -100px; } li#nav04 a:hover { background-position: -180px -100px; } li#nav05 a:link, li#nav05 a:visited { background-position: 0px -129px; } li#nav05 a:hover { background-position: -180px -129px; } li#nav06 a:link, li#nav06 a:visited { background-position: 0px -158px; } li#nav06 a:hover { background-position: -180px -158px; } li#nav07 a:link, li#nav07 a:visited { background-position: 0px -187px; } li#nav07 a:hover { background-position: -180px -187px; } li#nav08 a:link, li#nav08 a:visited { background-position: 0px -216px; } li#nav08 a:hover { background-position: -180px -216px; } li#nav09 a:link, li#nav09 a:visited { background-position: 0px -245px; } li#nav09 a:hover { background-position: -180px -245px; }
Last edited by Rayzur; Apr 2, 2009 at 17:26. Reason: No good for IE7
Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Apr 3, 2009, 04:25 #11
Is this better, for any reason, than the previous fix which seems to work fine in all the main browsers?
If not then I will leave it as everything seems to be working fine.
Thanks for your help. It is much appreciated.
-
Apr 3, 2009, 08:20 #12Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Apr 3, 2009, 08:31 #13
Didn't realise that. I am using FF3, IE Tester and Safari.
Will give your alternative solution a go.
Bookmarks