Problem in safari, not in IE/Firefox

[dongan]

Hi,

The following works in IE and Firefox, not in Safari.

.MenuStyle ul {
height: 35px;
width: 100%;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

The following works in Safari, not in IE and Firefox
.MenuStyle ul {
height: 35px;
width: 100%;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 1px 0px 0px 0px;
}

How can i rewrite this code to work in all 3 browsers? Here is my complete CSS.

/* Main menu styles */
#Menu {
background: url(images/custom/main_menu.jpg) center center no-repeat;
width: 850px;
height: 35px;
}

.MenuStyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

.MenuStyle:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.MenuStyle ul {
height: 35px;
width: 100%;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.MenuStyle ul li {
display: inline;
height: 35px;
}

.MenuStyle ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding: 10px 30px;
margin: 0;
text-decoration: none;
height: 35px;
position: relative;
top: 11px;
left: 15px;
}

.MenuStyle ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: transparent url(images/custom/main_menu_hover.gif) right center repeat-x;
color: #010066;
padding: 10px 30px;
margin: 0;
text-decoration: none;
height: 35px;
}

.MenuStyle ul li a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding: 10px 30px;
margin: 0;
text-decoration: none;
height: 35px;
}

[WebJoel]

Would need to see the HTML also, -just 'the CSS' doesn't help enough. :o

[dongan]

http://www.petronic.com/xcart-try/home.php

Look at the menu Home, Shop. Blog, Forum. The menu is slightly down in Safari.

[WebJoel]

-Off a little bit in IE6 and (slightly more in) Firefox 2.0.0.9 too...

-I'm having a difficult time figuring out the absolute path to your external files (CSS and JS). Could you post the text path in absolute?
-disregard: -I figured it out...

Okay:, -this is not going to work...
#Container {
position: absolute middle;
text-align: left;
width: 850px;
}

/* <div> that holds logo, shopping cart text and image, and payment option images/custom */
#Header {
position: relative top middle;
width: 848px;
height: 75px;
background-color: #ffffff;
} "position" consists of default "static", or "relative", "fixed" or "absolute".

"middle" and "top" are selectors used, not values.

[dongan]

I changed and still the problem in Safari. Also the problem is with Menu class, not header.

[WebJoel]

I changed and still the problem in Safari. -And IE6 and Firefdox 2.0.0.9/

I'm getting your code readable (so that I can understand it). :)
Things like:
body {
background-color: #ffffff;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.25em;
min-width: 850px;
} are meaningless. Without a background-image in BODY, -what are you not repeating? :confused:

and:
/* General <div> that encompasses entire page */
#Container {
position:absolute;
text-align: left;
width: 850px;
} is probably unworkable... "absolute" positioned of "out of the document flow". Change this to "relative" and suddenly the document is 'in' the page-flow, and you can begin making things work. :)

[dongan]

-And IE6 and Firefdox 2.0.0.9/

I'm getting your code readable (so that I can understand it). :)
Things like:
are meaningless. Without a background-image in BODY, -what are you not repeating? :confused:

but, how can i solve the problem in Menu class? The menu section is not properly aligned in Safari.

[dongan]

You may refer the problem in safari http://www.petronic.com/xcart-try/petronicsafari.pdf

[WebJoel]

....but, how can i solve the problem in Menu class? The menu section is not properly aligned in Safari. -Have you not looked at this in IE6 or Firefox 2.0.0.9 at all? Problems abound.
You are using a XHTML 1.0 Transitional/ on what is clearly a HTML 4.0 transitional, have a 'container' (I call it a WRAPPER ) that wraps the entire page but THAT is 'wrapped' by a non-semantic TABLE (which I have removed to no deletarious change or affect at all to your page), removed the deprecated "<center>" it was using, and used the correct "margin:0 auto;" on "#content" and it still centers (albeit now, correctly)...

The CSS is massive... much of this could be inheritable, or is unnecessarily used. The CSS should be maybe 10% of the total page-weight. It's probably 50% or more (I'm working on that).

Question:, -why does "home" and "shop" change font-size on hover, when the other list-items do not? These are images, yes? The first two look like CSS list-items, the remainder look like image swaps...

It's going to take some time to figure this out. :)

[WebJoel]

All of this:#Menu { background: url(images/custom/main_menu.jpg) center center no-repeat; width:850px;height:35px;}
.MenuStyle {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;}
.MenuStyle:after {content: "."; display: block; height:0; clear: both; visibility: hidden;}
.MenuStyle ul {margin: -1px 0px 0px 0px; padding: 1px 0px 0px 0px;}
.MenuStyle ul {height:35px; width:100%; text-align: left;}
.MenuStyle ul li {display: inline; height:35px;}
.MenuStyle ul li a {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding: 10px 30px;text-decoration: none;
height: 35px; position: relative; top: 11px; left: 15px;}
.MenuStyle ul li a:hover {font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: transparent url(images/custom/main_menu_hover.gif) right center repeat-x;
color: #010066; padding: 10px 30px; text-decoration: none; height: 35px; }
.MenuStyle ul li a:active {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding: 10px 30px; text-decoration: none; height: 35px;}
#Home a {background: transparent url(images/custom/menu.gif) right center no-repeat; }
#Home a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#Shop a {background: transparent url(images/custom/menu.gif) right center no-repeat;}
#Shop a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#DogBreeds a {background: transparent url(images/custom/menu.gif) right center no-repeat;}
#DogBreeds a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#CatBreeds a {background: transparent url(images/custom/menu.gif) right center no-repeat;}
#CatBreeds a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#Tutorials a {background: transparent url(images/custom/menu.gif) right center no-repeat;}
#Tutorials a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#Blog a {background: transparent url(images/custom/menu.gif) right center no-repeat;}
#Blog a:hover {background: transparent url(images/custom/main_menu_hover.gif) right center no-repeat;}
#Forum a {background: transparent url(images/custom/forum_bg.gif) right center no-repeat;}
#Forum a:hover { background: transparent url(images/custom/forum_bg_hover.gif) right center no-repeat;}

can be deleted. It is superfluous and bloat.

Rewritten, the below does the same thing:#navigation {margin:10px auto; width:850px; height:35px; text-align:center; background-image: url("http://www.petronic.com/xcart-try/skin1/images/custom/main_menu.jpg");}
#navs {width:840px; height:35px; margin:0 auto;}
#navs li {display:inline; text-align:center; width:50px;}
#navs li a {padding:0 28px 16px 28px; font-weight:bold; width:100px; color:black; background-color:none; text-decoration:none;text-align:center; background: url("http://www.petronic.com/xcart-try/skin1/images/custom/main_menu.gif")}
#navs li a:hover {border:1px solid #37377d; border-top:0 none; text-decoration:underline; border-bottom:0 none; padding:0 27px 16px 27px; background: url("http://www.petronic.com/xcart-try/skin1/images/custom/main_menu_hover.gif")}

(I used absolute-path to your existing images, -of which could be 'sliced' into a 2 or 3px thick, 35px tall pieces and 'tiled' along the x-axis for even greater bandwidth reduction and resolve speeds..)

I changed your HTML from:<!-- Main menu -->
<div id="Menu" class="MenuStyle">
<ul>
<li id="Home"><a href="home.php">Home</a></li>
<li id="Shop"><a href="home.php">Shop</a></li>
<li id="DogBreeds"><a href="">Dog Breeds</a></li>
<li id="CatBreeds"><a href="">Cat Breeds</a></li>
<li id="Tutorials"><a href="">Tutorials</a></li>
<li id="Blog"><a href="">Blog</a></li>
<li id="Forum"><a href="">Forum</a></li>
</ul>
</div>

To this:<!-- Main menu -->
<div id="navigation">
<ul id="navs">
<li><a title="Home" href="home.php">Home</a></li>
<li><a title="Shop" href="home.php">Shop</a></li>
<li><a title="Dog Breeds" href="#">Dog Breeds</a></li>
<li><a title="Cat Breeds" href="#">Cat Breeds</a></li>
<li><a title="Tutorials" href="#">Tutorials</a></li>
<li><a title="Blog" href="#">Blog</a></li>
<li><a title="Forum" href="#">Forum</a></li>
</ul>
</div> Mostly, this change was to get myself away from things that your CSS might be performing that I didn't want to use.
You have TWO css files, -perfectly okay to do so, -but one of them seems to be directed at injecting "style" into "TABLE" elements.... Using CSS this way is no better than plain-ol' TABLE layout. Lose the TABLE layout, kill the second CSS sheet, optimize the code that you have. You're wasting code unnecessarily..

This now looks the same on IE6 and Firefox 2.0.0.9. I have yet to check it on Safari, Mozilla, Konqueror and Seamonkey though. Issues may still come up (-this may still not do what you wanted to in Safari... -it's possible!), but I'm tired and it's quitin' time. :D

This is *just the navigation list* at the top of your page. Looking through your swollen code, I see similar improvements of optimization, reductions in page-weight & improved efficiency that can be implemented. :)

A fun read -->http://www.hotdesign.com/seybold/index.html

[Centauri]

Why don't you attach the background image to the <ul> itself - the surrouning div is not even required then, as all styles can be applied to the <ul> - one less thing to try and align.

[WebJoel]

Why don't you attach the background image to the <ul> itself - the surrouning div is not even required then, as all styles can be applied to the <ul> - one less thing to try and align. Ah... yes. :o I did start by doing that and for some weirding reason it was causing me problems. Mostly, I wanted to get RID of having an ID and a CLASS declared for the 'wrap DIV' and those individual IDs called for every link, as in orig. OP code). :rolleyes:

I may have resolved that problem but I left the superfluous 'wrapping div' around the <ul> just so that I could post-up for the night. :p
-There are sooooo many boosts available to this build that I see I didn't account this 'oversight' to be of any consequence to anyone other than an true aficionado (-and look who called me in on the carpet over it... :D )
I predict that this build could be reduced in size by 60-70% overall, and in all liklihood have more spfx effects and bells-'n'-whistles than it does now. ;)