Firefox/Safari little x-browser prob

bamme

Senior Member
Hi guys

Ive just finished customising a php out of the box music shop (thanks greg for the help with htaccess file!)

Ive noticed a little niggle on safari with the block of text on the homepage (div id=welcome), to the right of the logo on the top blue bar. in firefox, its positioned correctly, but in Safari its too high up:

The Best Music Shop - New Indie Music Artists Store and Free Legal Music Downloads Center

Because it's php, its quite difficult for me to change this - ive had no luck trying to work out how to use MAMP a local php editing program, and im not great with working out which bits to leave alone and which to change in php, so was quite a task changing it to this extent.

I have tried to follow this in order to resolve my safari/firefox issue but to no avail:

Keeping Safari (and Chrome) Hacks Out of Your Stylesheets | Evolution Web Development

(think this was for safari 3 maybe..)

any resources or ideas would be very helpful :)
thankyou!
 
Hay sweets
Use this ~
#welcome{margin-top:whatever} //all browsers
#welcome,x:-webkit-any-link{margin-top:Webkit browsers specific rule} //override for Safari and Chrome.

That second rule will effect all versions of any browser that uses the safari rendering agent.

If you really don't want to use hacks then let me know and we'll get creative with some server side coding, but the CSS option is the best idea TBH.

Jaz
 
Hi Jaz

Thanks for the reply :) Im using position-relative to position 'welcome':

Code:
#welcome {    display:inline;     position:relative; top:70px; left:50px;}

rather than margin-top here , as margin-top doesnt seem to work alongside the display:inline part, and as this part was built into the code as i downloaded it, a lotta things go a bit weird when you modify it. i tried to get around it and use a margin on the <h1> within 'welcome' but that didnt work out very well

can i still use this rule with position-relative?
 
That was more an example than being specfic code sweets, sorry should have made that more obvious my fault. :)

Yeah what that rule does is override the rules above it but only for webkit browsers no others.

So you could have totally different code as in.

#welcome{position:relative;color:blue;border 10px dotted;padding:20px}

then set it differently for Webkit browsers so ~

#welcome,x:-webkit-any-link{position:inline;color:red;border:1px solid green;padding:5px}

So every browser would display the welcome div with a relative position, blue text, a 10 pixel wide border that is blue and dotted with 20 pixels of padding.

However all webkit browsers will instead show the same welcome div as an element with a position of in-line not relative, text colour as red, with a 1 pixel wide solid border but with a border colur of green with only 5 pixels of padding.

So for you try ~
#welcome {display:inline;position:relative;top:70px;left:50px}
#welcome;x:-webkit-any-link{top:100px}


That way only Safari and Chrome will display it 100 pixels from the top all the other browsers will display it 70 pixels form the top, obviously change the second rule to make it the correct hight in Safari 100 pixels is just a blind guess.

Just to note you can hack Firefox the same way if you needed to ~
#welcome {display:inline;position:relative;top:70px;left:50px}
#welcome;x:-webkit-any-link{top:100px}
#welcome,x:-moz-any-link{top:150px}


In that example all browsers will display it 70 pixels from the top, 50 pixels from the left, give it a position of relative and display it in-line, Safari and Chrome will however give it a top of 100 pixels not the 70 pixels and Firefox will give it a top of 150 pixels, and only those browser will follow those rules.

Hopefully I have explained it better, if not let me know.

Jaz :)
 
thanks jaz, youve explained great :) so essentially, postion:relative doesnt work on safari, and instead i should use just top:100px or whatever the value, and inside that little hack's brackets. thanks!!
 
Okay maybe not so well explained. :lol:

Position relative does work in Safari. The hack above just lets you write Safari specfic CSS to override the odd browser descrepancy. Huh why didn't I just say that in the first place? :confused:
 
haha no worries, well i tried it out and it didnt seem to affect anything.. heres a list of what i tried:
#welcome;x:-webkit-any-link{top:120px;}

#welcome;x:-webkit-any-link{float:right;margin-top:120px;}

#welcome;x:-webkit-any-link{margin-top:120px;}

#welcome h1;x:-webkit-any-link{color:red;margin-top:120px;}

the last version of the rules i tried I added the color in to try and see if the rule was actually doing anything on safari, so i knew if i was just targeting the wrong element or writing something wrong to make it not take effect.. the text didnt show up red :S

is there anything else i could try, or could it be a server problem or anything else causing this rule not to work?
 
x:-webkit-any-link

Should work as I've used it on many projects with no problems in both browsers.

Okay few things to try.
1. Are you viewing it in either Safari or Chrome?
2. Does it go under the first result?
So ~
#welcome{margin-top:100px}
#welcome;x:-webkit-any-link{margin-top:120px}


3. Is the id called welcome, not Welcome, or spelled another way thats then being referenced wrong?

That should work sweets. : )

Check out http://rogerneedle.com/css/2.css and search for webkit to see examples on a live site.
 
Aww wkd.
The reason setting the colour to red on the H1 wont work though is because you are overriding it further in the code.
#welcome h1;x:-webkit-any-link{color:red;margin-top:120px;}

#welcome h3 {
font:14px Arial, sans-serif;
color:#a0bac6;
}

#welcome h1 {
font: 18px Arial, sans-serif;
padding: 0 0 5px 0;
color:#fff;


So to get it to work the webkit-any-link rule will have to go below the #welcome h1 rule. :)
 
Back
Top