Thread: browser issues css

I have been working on a theme and it looks great in IE. When I view this site in Firefox/Chrome, the horizontal menu is lower than it should be which in turn pushes the content below it down. This also causes issues with two images I have above the menu. If you take a look in IE, you will see how it should look. I cannot figure out what is pushing the menu down and what is making there be a line break between customer service and my account images in FF/Chrome. Any help is appreciated.

http://development.martz.me/theme/web.htm

The layout is coming from style.css. I also have newstyle.css but that doesn't have anything pertaining to the layout in it. Customer service and my account are in style.css and within the #topnotes div. The div's with customer service and my account are custservice and myaccount.

The div for the menu is the menu div with li's within it for the tabs.

I'll take a look at this for you now - usually, it's IE that misbehaves but in your case it's the other way round. Anyway, it looks interesting. Give me 30mins or so.

Here are the changes I've made below (replace any existing styles with these)...

You can see a copy of the page working here:
http://www.webopius.com/projects/chris/chris.html
(Just let me know and I'll delete this once you've got your site working)

This has been tested (quickly) on Windows: IE8, Firefox and Chrome and Mac: Safari, Chrome, Firefox and Opera

CSS changes (replace the full paths to images with just images/ as before) ...

Code:

/* @group Webopius Mods */

#custservice {
	display: inline;
	float: left;
}
#myaccount {
	display: inline;
	float: left;
	
}
#custservice A {
	WIDTH: 171px; display: block; BACKGROUND: url(http://development.martz.me/theme/web_files/images/TopCusService2.png) no-repeat; HEIGHT: 94px
}
#topnotes {
	position: absolute;
	right:  0px;
	bottom:  0px;
}
#custservice A:hover {
	BACKGROUND: url(http://development.martz.me/theme/web_files/images/TopCusService1.png) no-repeat; 
}
#myaccount A {
	WIDTH: 150px; display: block; BACKGROUND: url(http://development.martz.me/theme/web_files/images/TopMyAccount2.png) no-repeat; HEIGHT: 94px
}
#myaccount A:hover {
	WIDTH: 150px; BACKGROUND: url(http://development.martz.me/theme/web_files/images/TopMyAccount1.png) no-repeat; HEIGHT: 94px
}

#menu {
	POSITION: absolute; WIDTH: 650px; BOTTOM: -1px; HEIGHT: 33px; LEFT: 163px;
}

#menu UL {
	LIST-STYLE-TYPE: none; WIDTH: 700px; HEIGHT: 33px; margin: 0px;
}

#menu LI {
	TEXT-ALIGN: center; LIST-STYLE-TYPE: none; DISPLAY: inline
}
#menu LI A {
	TEXT-INDENT: -9999px; DISPLAY: block; BACKGROUND: url(http://development.martz.me/theme/web_files/images/tabs.png) no-repeat; FLOAT: left; TEXT-DECORATION: none
}
/* @end */

Thanks webopius!!!! That worked great. The only problem I had was that #menu ul had a margin: 0;. I changed this to
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

So that my left padding would work correctly

THANK YOU SO MUCH!!!

You can remove this from your dev server

Any suggestions for making my menu hovers be perfectly on top the image so the words and images don't move at all? Currently I have the hover working, but if you hover over Art, you will see it moves. Any suggestions on how to get it to be perfect?

Any suggestions for getting the css menu on http://www.sohtanaka.com/web-design/...-w-css-jquery/ to work within my theme?