problems with css on MacOs, on windows in all browsers is OK
I have problem with positioning my div. On Windows each browser is ok, but on MacOS it's different. This is the site: http://www.pulbus.pl
The problem is in the home page and in the contact page. The div with contact in the lower-left corner is below the blue label. It's lower than in windows about 20px.
This is my doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
My xhtml and css is valid, I've checked them on w3 validator.
Code:
<div id="data">
<span id="name">Pul-Bus Grzegorz Pulcyn</span> <br/>
ul. Waleniowa 7/3 <br/>
85-435 Bydgoszcz <br/>
<a href=" mailto: kontakt@pulbus.pl">kontakt@pulbus.pl</a><br/><br/>
开发者_运维知识库 <span id="tel">tel: +48 500 100 333</div>
</div>
#data
{
font-size: 12px;
color: #003664;
margin: 0 auto;
padding: 0 0 0 0;
width: 320px;
font-family: Verdana, Helvetica, sans-serif;
position: relative;
top: -380px;
right: 160px;
}
Looks like you are missing an end tag
<div id="data">
<span id="name">Pul-Bus Grzegorz Pulcyn</span> <br/>
ul. Waleniowa 7/3 <br/>
85-435 Bydgoszcz <br/>
<a href=" mailto: kontakt@pulbus.pl">kontakt@pulbus.pl</a><br/><br/>
<span id="tel">tel: +48 500 100 333</span>
</div>
the </span> after the tele number is missing in your example markup
on windows I have tested my site on: chrome, opera, ie, firefox on Mac: ff i safari
It is really strange, maybe some font issues or sth like that? it is possible? i don't have snippset now, this is only a div with span inside with position relative set up.
In FF 3.5 @ MAC, you must set...
#data { top: -101px; }
...to display correctly.
Also...
#readmore { top: 8px; }
...will correct another bad positioning.
I must say that construct a website relative/absolute positioning is a big headache to mantain. I suggest switch to a static floated structure in a box model hack.
Anyway, I recommend you the JavaScript Library CSS Browser Selector to apply in an easy-timeless way the css hacks you need in this way:
.os.browser .your-markup { ... }
.mac.ff3_5 #data { top: -101px; }
Hope this helps. :)
加载中,请稍侯......
精彩评论