browser issues with my menu

danny322 · #1 Nov 5th, 2007, 11:18

Hi everyone, could someone have a look at my site......

http://www.design365.co.uk/sef/homepage.htm

its fine in ie but if you have a look in mozilla its totally different. Heres my code

HTML

Quote:

<div id="top_menu">
<div class="buttonscontainer">
<div class="buttons">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Members</a>
<a href="#">Contact</a>
<a href="#">Forum</a>
<a href="#">About</a>
</div>
</div>
</div>

CSS

Quote:

#top_menu{
position: absolute;
top: 60px;
left: 119px;
width: 768px;
height: 24px;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
}
.buttonscontainer {
width: 700px;
}
.buttons a {
color: #FFFFFF;
background: url(images/btn.gif) 0 0 no-repeat;
padding: 8px;
padding-left: 27px;
display: inline;
font: x-small Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
width: 105px;
height: 31px;
}
.buttons a:hover {
color: #FFFFFF;
text-decoration: none;
background: url(images/over_btn.gif) 0 0 no-repeat;
}

Lchad · #2 Nov 5th, 2007, 11:29

First of all it is appreciated if you do not double post.
Did you read the answer I gave you to your last question about using ul's and li's.

You should always design for Firefox first and then fix it if necessary for IE.

You are using x-small font in Arial so it's actually rendering perfectly in Firefox.

danny322 · #3 Nov 5th, 2007, 11:40

Lchad, if you noticed its a different problem im having to my previous thread, if u notice that in firefox the buttons are higher up the page which looks awful i need them to rest on the orange line like in IE. <ul> wont solve this im very sure

AdRock · #4 Nov 5th, 2007, 11:58

Like Linda said if you put them in a list and you float left the </li> they will all align like you want

HTML: Select all

 			 				<div id="top_menu"> 
<div class="buttonscontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>

and in the css use something like

Code: Select all

ul li {
    float:left;
    /* and any other properties such as margins */
}

karinne · #5 Nov 5th, 2007, 12:39

What's with the z-index: 1, visibility: visible; and position: absolute; in your #top_menu?!?!

In all my years of doing web, I have never needed to use any of those for a menu.

Go to the link Lchad gave you in the other thread and have a look at how menus should be done. AdRock gave you a great example above.

danny322 · #6 Nov 5th, 2007, 14:52

AdRock what other properties do i need to include apart from float: left; because ive tried a few margin adjustments etc and no improvement

Marc · #7 Nov 5th, 2007, 15:06

I don't see any difference between IE 6 and FF 2 - except the font is bigger in IE. Have you fixed this issue?

danny322 · #8 Nov 6th, 2007, 09:12

Still havnt fixed the issue

the menu is still not resting on the orange line, i even have the orange line in a seperate div etc. I dont really understand the 'float' attribute.

Does anybody have any advice or good css menu code which uses to seperate images and no java?

AdRock · #9 Nov 6th, 2007, 10:49

Have you looked at cssplay?

There are loads of menus which you can use for free and they are all css based

Aso · #10 Nov 6th, 2007, 17:46

Danny, try replacing your .rollover a styles with this:

Code: Select all

.rollover a {
float: left;
width: 105px;
height: 31px;
text-align: center;
padding: 8px 0 12px 5px;
font: bold 13px sans-serif;;
color: #FFFFFF;
margin-right: 15px;
background: url("images/btn.gif") 0 0 no-repeat;
text-decoration: none;
}

I should also mention that IE6 requires a content download before you can fully view your page - try placing your flash using swfobject (documentation and script at deconcept)

HTH

Alex

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Browser compatibility issues	Craigj1303	Web Page Design	3	Feb 4th, 2008 09:28
height: 100% Browser issues - okay in IE not in FF or Opera	mmgrad	Web Page Design	3	Oct 27th, 2007 11:24
cross browser issues	planescape	Web Page Design	4	Aug 29th, 2007 21:16
Browser issues with css	tobymather	Web Page Design	9	Apr 18th, 2007 17:19
Cross Browser issues.	Destx	Web Page Design	5	Mar 26th, 2007 18:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
browser issues with my menu