|
|
Positioning bugs in major browsers.
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
I just started to write my first web page in code.
And ran into a weird thing right away.
An image didn't want to move up to the logo, and left a 3-4px space in between.
I could resolve the issue this way on the CSS style sheet:
img {
vertical-align: -10%;
}
This is for Safari. How does one do such corrections so they only apply to a certain browser (in this case: Safari)?
PS: the problem was not solved in Firefox. There was still a minor (1px) gap.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
I could fix the positioning problem for both Safari and Firefox by changing it to this:
img {
vertical-align: -15%;
}
No idea if this is still XHTML1.1 strict.
(
Last edited by Veltliner; Jan 23, 2009 at 03:55 AM.
)
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
This is too vague. If you want to fix the problem more generally, there's probably a default margin that's unaccounted for. If the default font sizes for the browsers are different, the spacing might be slightly different.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Oct 2004
Status:
Offline
|
|
Yes, give more detail or even post your code. I agree with Synotic that you may not have zeroed your margins for the body tag.
|
__________________________________________________
My stupid iPhone game: Nesen Probe, it's rather old, annoying and pointless, but it's free.
Was free. Now it's gone. Never to be seen again.
Off to join its brother and sister apps that could not
keep up with the ever updating iOS. RIP Nesen Probe.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
I would install the browser CSS reset library of Yahoo's to see if you are dealing with browser defined defaults. Otherwise, there are many techniques for offsetting margins... You could do so with negative margins or negative relative positions.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
The default margin of 0px I did use to counter for the margin the p element give.
But if I use the same margin: 0px; for the img element, it doesn't work, only what I had in my first post.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by besson3c
I would install the browser CSS reset library of Yahoo's to see if you are dealing with browser defined defaults. Otherwise, there are many techniques for offsetting margins... You could do so with negative margins or negative relative positions.
A reset library?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Just for the record, I'm not suggesting that you should install this thing necessarily, I'm just saying that this is a good way to put all browsers at the same level if you ever think that you are running into browser specific issues relating to default CSS attributes.
You'll need to provide more code for us to be able to help you with your problem.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Thanks for this link.
I'll study the new info and go from there.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
If you've zero'd out both margin and padding on the body and containing elements, perhaps it is a float issue. Post the code or a link.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|