Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Enthusiast Zone > Art & Graphic Design > Positioning bugs in major browsers.

Positioning bugs in major browsers.
Thread Tools
Veltliner
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 23, 2009, 03:04 AM
 
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.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 23, 2009, 03:10 AM
 
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. )
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jan 25, 2009, 03:38 AM
 
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.
     
design219
Professional Poster
Join Date: Oct 2004
Status: Offline
Reply With Quote
Jan 25, 2009, 10:20 AM
 
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.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jan 25, 2009, 11:56 AM
 
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.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 25, 2009, 08:21 PM
 
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.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 25, 2009, 08:23 PM
 
Originally Posted by besson3c View Post
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?
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jan 26, 2009, 02:25 AM
 
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jan 26, 2009, 02:37 AM
 
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.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 26, 2009, 05:59 AM
 
Thanks for this link.

I'll study the new info and go from there.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 27, 2009, 10:15 AM
 
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.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 08:52 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,