开发者

problems with css on MacOs, on windows in all browsers is OK

开发者 https://www.devze.com 2022-12-10 16:35 出处:网络
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

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. :)

0

精彩评论

暂无评论...
验证码 换一张
取 消