Looks strenge in google chrome

[vilhelm90]

Hi, The menys on my website looks wired in the google chrome browser.

It ís like it doesn´t recognice the height and width, so they just makes the a-backgrounds as big as the text is.

Here is it in Internet Explorer

And here is in Google Chrome

Here is from style.css

a.upper_meny { font-family: Verdana; font-size: 10pt; color: #000000; font-weight: bold; text-decoration: none;
background: #2AA6C2 url(images/upper_meny.jpg); border-style: solid; border-color: #FFFFFF; border-width: 1px;
text-align: center; width: 160; height: 32;}

I would be very happy if anyone of you could sholov this problem

Best regards / Vilhelm

 

[sysgenmedia]

Offhand I would guess that Chrome doesn't like having widths / heights on <a> tags.

Fixing these sorts of problems generally requires a good knowledge of css and how various browsers interpret it (which you'll figure out over time) and a good deal of trial and error.

Your best bet may be to create a <div> for each link, apply the background styling, height, width and border to the div... then place the text-centric stylings on the <a> tag within the div.

Note: You'll then need to float the divs so that they appear next to each other instead of on top of each other, and probably add some padding or margins to space them out.

 

[PixelPusher]

Vilhelm,

You need to change the display method of the buttons. Chrome is displaying things correctly, IE isn't. By adding the style "display:block" to your anchors you will then be able to reliably define the height and width, and it should render correctly in all browsers.

a.upper_meny {
display:block;   /* This is what you were missing */
width: 160px; 
height: 32px;
font:bold 10pt Verdana;
text-decoration: none;
text-align: center;
background: #2AA6C2 url(images/upper_meny.jpg);
border:solid 1px #fff;
}

 

[AK Web Design]

Don't forget to make your sit W3C validated