Solved

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

Posted on 2013-06-06
10
479 Views
Last Modified: 2013-06-06
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
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39226108
try this...

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

Open in new window

0
 

Author Comment

by:bbdesign
ID: 39226130
I tried that. It should be semantically identical, though, correct? It doesn't seem to have any effect.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39226149
Try adding position: relative instead of position:absolute to div#contentwrapper
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bbdesign
ID: 39226165
That moves things around a bit, but its still inconsistent from Safari to all other browsers, by the same amount.
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39226173
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39226196
I think you would be better of using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 

Author Comment

by:bbdesign
ID: 39226236
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
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39226281
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39226331
That might be the easier route even though the site it's self is not responsive.
0
 

Author Comment

by:bbdesign
ID: 39226336
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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question