PDA

View Full Version : Space after nav bar and no "//" before the start of a li in IE



Danaldinho
Mar 21st, 2009, 09:07 PM
Hey,

When you look in Firefox on my website: http://www.lilwaynehq.com/biography/biography2.php - everything looks fine :P

But in IE, the two slashes ("//") that should start before the <li>'s don't show and in IE 6 (I think its fine in IE7) there is a space after the menu before the line (look at image below):

http://i260.photobucket.com/albums/ii10/DanielMousdell/menubar.jpg?t=1237662431

Does anyone know how I can fix these issues.

Thanks alot and I appreciate it :)

tagnu
Mar 21st, 2009, 09:31 PM
Regarding the "//", which uses the :before pseudo class, is not supported by IE6 (http://www.satzansatz.de/cssd/pseudocss.html)

.entry ul li:before, ul li:before {
content:"// ";
}

Danaldinho
Mar 21st, 2009, 09:36 PM
Regarding the "//", which uses the :before pseudo class, is not supported by IE6 (http://www.satzansatz.de/cssd/pseudocss.html)

.entry ul li:before, ul li:before {
content:"// ";
}

Is there anyway to get it to show at least in IE7 (like maybe another way of coding it?)

Thanks :)

tagnu
Mar 21st, 2009, 09:42 PM
Making the margin bottom attribute to 0 removes that gap issue in IE.

div.hr {
/*style.css (line 430)*/
background:transparent url(/images/break.png) repeat-x scroll 0 0;
border-bottom:2px solid #333333;
clear:both;
height:8px;
margin:0 0 1em;
}

tagnu
Mar 21st, 2009, 09:46 PM
Is there anyway to get it to show at least in IE7 (like maybe another way of coding it?)

Thanks :)

Check this link:
http://deanedwards.me.uk/IE7/

I haven't tried it.

Danaldinho
Mar 21st, 2009, 10:34 PM
Check this link:
http://deanedwards.me.uk/IE7/

I haven't tried it.

I looked on that website and on the list was ":before/:after/content:"

Is that what I am after and what do I do now on that website (I don't get it) :confused:

Thanks :)

Danaldinho
Mar 21st, 2009, 11:40 PM
Making the margin bottom attribute to 0 removes that gap issue in IE.

div.hr {
/*style.css (line 430)*/
background:transparent url(/images/break.png) repeat-x scroll 0 0;
border-bottom:2px solid #333333;
clear:both;
height:8px;
margin:0 0 1em;
}

I tried what you said and the gap is still there :(

_Aerospace_Eng_
Mar 22nd, 2009, 09:33 AM
I looked on that website and on the list was ":before/:after/content:"

Is that what I am after and what do I do now on that website (I don't get it) :confused:

Thanks :)

That site provides a JS file that makes IE6 behave like IE7 by fixing all of the broken stuff.

Danaldinho
Mar 22nd, 2009, 01:17 PM
That site provides a JS file that makes IE6 behave like IE7 by fixing all of the broken stuff.

Ok, but the thing I don't understand is that the "//" doesn't even show in IE7 :confused:

_Aerospace_Eng_
Mar 22nd, 2009, 05:21 PM
Its not supported in any version of IE. Thats why the script needs to be used if you want it to work. Try this in Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.entry ul li:before, ul li:before {
content:"// ";
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="entry">
<ul>
<li>This is some content that should have // after it.</li>
</ul>
</div>
</body>
</html>

Notice the use of the deanedwards script.

Danaldinho
Mar 22nd, 2009, 06:32 PM
Its not supported in any version of IE. Thats why the script needs to be used if you want it to work. Try this in Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.entry ul li:before, ul li:before {
content:"// ";
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="entry">
<ul>
<li>This is some content that should have // after it.</li>
</ul>
</div>
</body>
</html>

Notice the use of the deanedwards script.

Thanks alot :)

It worked, it shows the "//" before a list in IE :D

Appreciate it.

Also the js file (there seems to be alot of code in it, do I need all of that just to get the "//" to show in IE)?

Now, does anyone know how I can get this menu bar to work in IE7?

Thanks :)

tagnu
Mar 23rd, 2009, 01:58 PM
Thanks alot :)

Now, does anyone know how I can get this menu bar to work in IE7?

Thanks :)


Change your #navcontainer to the following.


#navcontainer {/*style.css (line 18)*/
border-bottom:1px solid white;
}

See the link:
http://tagnu.freehostia.com/debug/biography2.php.htm

I've removed all the scripts (ads, etc from the page)

You might want to read more on this issue: - un-collapsing margins (http://www.complexspiral.com/publications/uncollapsing-margins/)

Danaldinho
Mar 23rd, 2009, 08:19 PM
Change your #navcontainer to the following.


#navcontainer {/*style.css (line 18)*/
border-bottom:1px solid white;
}

See the link:
http://tagnu.freehostia.com/debug/biography2.php.htm

I've removed all the scripts (ads, etc from the page)

You might want to read more on this issue: - un-collapsing margins (http://www.complexspiral.com/publications/uncollapsing-margins/)

Alright, thanks mate.

It worked and looks good :D :thumbsup:


-----------------------------

Also does anyone know if I need all of the code in the the js file (http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js) to just show the "//" before a <li> tag in IE?

Thanks alot :)

_Aerospace_Eng_
Mar 23rd, 2009, 09:00 PM
Well no but its just easier as it fixes a lot of other issues too. You want to look into the insertBefore DOM method. Good luck.

http://www.roseindia.net/javascript/javascript-insertbefore-method.shtml

Danaldinho
Mar 23rd, 2009, 11:27 PM
Well no but its just easier as it fixes a lot of other issues too. You want to look into the insertBefore DOM method. Good luck.

http://www.roseindia.net/javascript/javascript-insertbefore-method.shtml

Thanks alot mate :)