How to adjust design for different browsers?

E

eGomes2107

New Member
I am a noob when it comes to web design. I downloaded a template to create a site with but My navigation bar looks great in Chrome but is not positioned correctly in FireFox and a part of it is not positioned correctly in IE. Below is my code. I am not sure if this template was like this at the start or after I started adjusting it. I only used chrome for previews when I first started this.

HTML
------------

<nav>
<ul id="menu">
<li class="alpha" id="menu_active"><a href="index.html"><span><span>Home</span></span></a></li>
<li><a href="Whatisllf.html"><span><span>What is LLF?</span></span> </a></li>
<li><a href="TeamManagement.html"><span><span>Team Management</span></span></a></li>
<li><a href="PlayerData.html"><span><span>Player Data</span></span></a></li>
<li><a href="PostSeason.html"><span><span>Post Season</span></span></a></li>
<li><a href="Forums.html"><span><span>Forums</span></span></a></li>
<li class="omega"><a href="PrivacyPolicy.html"><span><span>Privacy Policy</span></span></a></li>
</ul>
</nav>

CSS
-----------------

#menu {width:100%;overflow:hidden;margin-top:3px}
#menu li {float: left;display:block}
#menu a {display:block;font-size:16px;font-weight:400;color:#000;background:url(../images/menu.gif) top repeat-x;line-height:55px;text-decoration:none}
#menu li span {display:block;background:url(../images/menu_left.gif) top left no-repeat}
#menu .alpha span {background:url(../images/left_menu.gif) top left no-repeat}
#menu .alpha a:hover span,#menu .alpha#menu_active a span {background:url(../images/left_menu_active.gif) top left no-repeat}
#menu .omega span span {background:url(../images/right_menu.gif) top right no-repeat}
#menu .omega a:hover span span,#menu .omega#menu_active a span span {background:url(../images/right_menu_active.gif) top right no-repeat}
#menu li span span,#menu .alpha span span {background:url(../images/menu_right.gif) top right no-repeat;padding:0 24px}
#menu a:hover,#menu #menu_active a {color:#fff;background:url(../images/menu_active.gif) top repeat-x}
#menu a:hover span,#menu #menu_active a span {background:url(../images/menu_left_active.gif) top left no-repeat}
#menu a:hover span span,#menu #menu_active a span span,#menu .alpha#menu_active a span span,#menu .alpha a:hover span span {background:url(../images/menu_right_active.gif) tp right no-repeat}
 
chrishirst

chrishirst

Well-Known Member
Staff member
Partial code is not much use because the "problem" might well be elsewhere in the source.

A uri to the document is far better for debugging.
 
chrishirst

chrishirst

Well-Known Member
Staff member
It's called "float drop" and happens when the elements are too wide to fit onto the same horizontal row.
 
E

eGomes2107

New Member
Well, how Do I fix this since it works fine in chrome but not in IE or Firefox.

I can see what your saying with IE but with FireFox the whole nav bar is in a totally different part of the page...so is it the same problem?
 
chrishirst

chrishirst

Well-Known Member
Staff member
Just remove two or three pixels from the overall width of the elements that make up the float plane in that row.
 
CaldwellYSR

CaldwellYSR

Member
Unrelated question here but what the crap is it with templates doing this span stuff??

HTML: 
<li><a href="Whatisllf.html"><span><span>What is LLF?</span></span> </a></li>

Seriously what the <span><span>Stupid words</span></span>??? What does that do for anything?
 
Phreaddee

Phreaddee

Super Moderator
Staff member
clearly one span isnt enough.
really is should be
<span><span><span>Stupid Words</span></span></span>

or if we are going to add completely useless markup we may as well add 7 spans, or 12 or hell just have a cool 100 just for the fun of it.

I'm sure you could do some sort of jquery to magically stuff 100 spans into each and every tag. now that would be sweet.
 
E

eGomes2107

New Member
thanks for your suggestions...lol i thought all the <span> was a little odd but since it was a template I left it as is as I didnt want to screw anything up.

I fixed the issue from the OP, I thank you for the suggestions but the problem was a missing </div> tag. I found it and thats what did it.

I do have another issue tho, I added my twitter feed to the front page, the feed only shows up in FF and Chrome but its missing in IE. any ideas?

http://egomes2107.ipage.com/llf/laligafut2/index.html
 
You must log in or register to reply here.
Top