Forums

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


.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
http://webtipsmagazine.com/examples/IE6.jpg

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.
http://webtipsmagazine.com/examples/IE7.jpg

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

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

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

Thanks.-

AshtonSanders

"ipad" said:
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:

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

"ipad" said:

- 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:

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

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

"ipad" said:

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" said:

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

See my note above

"ipad" said:

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

Thanks.-

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

treehouse : what would you like to learn today?

Forums

IE6/IE7 Problem with position:absolute and floats