Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 493
  • Last Modified:

Position <div> with CSS using margin-top with percentage

Here is my test page:
http://secure.bbdesign.com/watersedgepa

See attached screenshot. I am getting inconsistent placement of one of my elements (I added a red border around it for easier identification).

The element is <div id="contentwrapper"> and is styled like this:

div#contentwrapper{
position:absolute;
top:0;
left:50%;
margin:30% 0 0 -30em;
padding-bottom:2.5em;
width:60em;
border:1px solid #c00;}

I'm sure the problem is the 30% margin-top.

The reason for the percentage is that we are trying to change the position of various elements over the background image, depending on the browser window's size and proportions. A percentage seemed to be the way to go.

It basically works the way we want, however with Safari is much higher up than in any other browser. All others appear to be about the same (including IE).

I'm not sure I understand 100% how a percentage in margin-top is supposed to work. Is there something I can modify in my CSS that will make this more consistent? Or is this an inherent browser inconsistency problem that I will need to find a workaround for?

Thank you!
1.jpg
0
bbdesign
Asked:
bbdesign
  • 4
  • 4
  • 2
1 Solution
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
try this...

div#contentwrapper{
margin-top:30%;
margin-left: -30em;
}

Open in new window

0
 
bbdesignAuthor Commented:
I tried that. It should be semantically identical, though, correct? It doesn't seem to have any effect.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Try adding position: relative instead of position:absolute to div#contentwrapper
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
bbdesignAuthor Commented:
That moves things around a bit, but its still inconsistent from Safari to all other browsers, by the same amount.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Sorry about the guessing.. but I don't have safari...

so try this this might work 80% chances...

div#contentwrapper {
position: absolute;
top: 50%;
left: 50%;
margin-left: -30em;
padding-bottom: 2.5em;
width: 60em;
border: 1px solid #c00;
}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you would be better of using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 
bbdesignAuthor Commented:
IshaanRawat - yes, it had occurred to me to try putting it in "top" instead of "margin-top", but still no effect.

Padas - do you mean I should try to detect the Safari browser and give it a different percentage? I normally only use Media Queries when doing responsive web design for browser widths.

It seems Safari calculates its percentages based on the parent element differently from other browsers?

Thanks!
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Yp for that try this...

if ($.browser.safari) {
    $("#contentwrapper").css("margin-top", "50%");
}

but make sure to use it with jQuery version < 1.9   ....
Because jQuery has disabled that since 1.9

See here... http://api.jquery.com/jQuery.browser/
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That might be the easier route even though the site it's self is not responsive.
0
 
bbdesignAuthor Commented:
Actually, while playing around with this, I have realized that top:30% does seem to fix this. It didn't affect Safari, but it did actually "fix" the other browsers so they are now consistent. I don't know why I didn't notice this before. For now, I think we are good to go.

Thanks again!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now