IE6/IE7 Problem with position:absolute and floats

[ipad]

I have a lot of issues with Internet Explorer 6,7 not mentioning 5 ;) I’ll put code+images to show problem:

1.- Internet Explorer 6:
– Main Navigation is messed up, it’s a sprite image: Here is the code http://pastie.org/509697 and is based on the Sprite2 technics by AListApart, I’ve tried with conditionals but I don’t know what it causes the problem.

– Navigation 2 is missing:
This is a float problem, why if I floated to the left and positioned absolute isn’t show, here’s the code I’ve used

Code:

.feed
{
float: right;
position: absolute;
top: 15px;
right: 102px;
}
.feed UL LI
{
display: inline;
}

.feed A
{
color: #626364;
text-transform: uppercase;
font-size: 0.7em;
}
.feed A:hover
{
color: #626364;
text-transform: uppercase;
font-size: 0.7em;
text-decoration: underline;
}
.rss
{
float: right;
width: 85px;
height: 28px;
display: block;
margin: -23px -93px 0 0;
background: transparent url(../images/rss-trans.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

A picture is worth a thousand words
[img]http://webtipsmagazine.com/examples/IE6.jpg[/img]

2.- Internet Explorer 7:

– The search box is messed up too: here is the code i’ve used http://pastie.org/509709

– The navigation 2 (feed/rss) isn’t float to the right, is showing to the left instead.
[img]http://webtipsmagazine.com/examples/IE7.jpg[/img]

3. Google Chrome is perfect :D
[img]http://webtipsmagazine.com/examples/chrome.jpg[/img]

3. Firefox is perfect :D
[img]http://webtipsmagazine.com/examples/firefox.jpg[/img]

Here is the example link
http://themeforest.webtipsmagazine.com/gs/

Thanks.-

[AshtonSanders]

"ipad" wrote:

I have a lot of issues with Internet Explorer 6,7 not mentioning 5 ;) I’ll put code+images to show problem:

1.- Internet Explorer 6:
– Main Navigation is messed up,

Try making this selector grab all anchors (instead of a:link and a:visited only) and I’d keep it all lowercase:

Code:

.nav li a
{
position: absolute;
top: 0;
height: 52px;
text-indent: -9000px;
overflow: hidden;
}

"ipad" wrote:

– Navigation 2 is missing:

Give the .feed a width so that it can’t be 100% wide
Also this (bolded) is not a good idea:

Code:

.feed {
float:right;
[b]margin:-37px [/b]55px 0 0;
}

Instead have move that div above ul.nav.current in your HTML markup

"ipad" wrote:

2.- Internet Explorer 7:

– The search box is messed up too

Yea, that’s a really wack way of positioning your search box. Simplify it by creating putting a div around it and positioning that div to the right. Then you can position the inputs/buttons inside that div seperately.

"ipad" wrote:

– The navigation 2 (feed/rss) isn’t float to the right, is showing to the left instead.

See my note above

"ipad" wrote:

Here is the example link
http://themeforest.webtipsmagazine.com/gs/

Thanks.-

Doh… Please put the link at the top next time ;)

[Author]

Posts