Absolute Elements Moving when Viewed on Different Screens

  • Ok, I’m a dabbler. I really don’t know CSS coding but I’ve gained a basic understanding of it… enough to get around.

    I’ve run into a frustrating problem and havn’t the experience to figure out. I need help, guys ??

    My site https://doing-something.com/blog has some positioning glitches I cannot figure out. When viewed in multiple browsers on my home/coding computer (MACBOOK Pro) via Firefox, Safari, and Opera everything looks fine. But when others view it via a PC in either firefox or explorer, the #maincol element shifts to the right about 150px. No other elements shift.

    What’s the deal? I thought once an element is set to absolute and the positioning is set (top, left, right etc) it shouldn’t move.

    Have a look below at the coding below. It is a modified version of the Minimalist theme by Joey Renalds. 

    html, body{ padding:20px 0px 20px 0px; margin:0; text-align:center; font-family:helvetica; font-size: 13px;} 

#page{ max-width:900px; text-align:left; margin-left:auto; margin-right:auto;} 

#header{ position:relative; width:400px; margin: 0px; padding: 0px; height:50px; overflow-x:hidden;}
#header h1{ position:relative; float:left; margin:0px 0px 0px 150px; width: 650px; padding:0px; font-family:helvetica; font-weight:bold; font-size:20px; text-transform:uppercase;}
#header h1 a{ text-decoration:none;}
#header h1 a:hover{ text-decoration:none;}
#header h2{ position:relative; float:left; clear:left; margin:0px 0px 0px 150px; width: 650px; padding:0px; font-family:helvetica; font-weight:bold; font-size:14px; text-transform:uppercase;} 

#leftcol{ width:130px; float:static; position:fixed; padding: 0px 20px 0px 0px; text-align:right; overflow-x:hidden;}

#menu {margin:0px 0px; text-align:right; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; }
#menu a {font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; text-decoration:none;}
#menu a:hover {font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; text-decoration:none;}

h2.menuheader {cursor: pointer;font-family:helvetica; font-weight:bold; font-size:14px; text-transform:uppercase;margin:0px; padding:0px;}

#menu ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; width:230px; clear:left; float:right;}
#menu ul li{margin: 0px 0px 0px 0px; display: block; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px;}
#menu ul li a{ width: 225px; display: block; padding: 5px 0px 5px 5px; text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li a:hover{ text-decoration:none; }
#menu ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li a{ width: 205px; display: block; padding: 5px 20px 5px 5px; text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li a:hover{ text-decoration:none; }
#menu ul li ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li ul li a{ width: 185px; padding: 5px 40px 5px 5px; display: block; text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li ul li a:hover{ text-decoration:none; }
#menu ul li ul li ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li ul li ul li a{ width: 165px; padding: 5px 60px 5px 5px; display: block; text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li ul li ul li a:hover{ text-decoration:none; }

ul#recentcomments {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; width:230px; clear:left; float:right;}
ul#recentcomments li{margin: 0px 0px 0px 0px; display: block; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px;}
ul#recentcomments li a{ width: 225px; display: block; padding: 5px 0px 5px 5px; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
ul#recentcomments li a:hover{ text-decoration:none; }
#recentcomments a{ text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px;}
#recentcomments a:hover{ text-decoration:none; font-weight:bold; font-family:helvetica; text-transform:uppercase; font-size:14px; }

#maincol{ float: left; display:inline; position: absolute; top: 90px; left: 338px; width:650px; font-family:verdana; font-size: 13px; overflow:hidden; text-align:left;}
#maincol h1 {margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold; font-size:22px; text-transform:uppercase; clear:both;}
#maincol h2 { margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold; font-size:20px;text-transform:uppercase; clear:both;}
#maincol h2 a{ text-decoration:none;} 

#maincol h3 { margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold; font-size:18px; text-transform:uppercase; clear:both;}
#maincol h4 { margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold;font-size:16px; text-transform:uppercase; clear:both;}
#maincol h5 { margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold; font-size:14px; text-transform:uppercase; clear:both;}
#maincol h6 { margin:0px 0px 0px 0px; padding:0px; font-family:helvetica; font-weight:bold; font-size:12px; text-transform:uppercase; clear:both;}
#maincol p{ font-size: 13px; line-height:1.7em; clear:left;}
#maincol p a:hover{ text-decoration:none;}
#maincol ul{ font-size: 13px; line-height:1.7em; clear:left;}
#maincol ol{ font-size: 13px; line-height:1.7em; clear:left;}
Viewing 5 replies - 1 through 5 (of 5 total)

  • Absolutely positioned elements are positioned with respect to their first non-statically positioned ancestor. If there is no non-statically positioned ancestor, they are positioned with respect to the viewport (browser window). In your case you have no non-statically positioned ancestor so your main column is positioned with respect to the viewport – which obviously will vary depending on the viewport size and resolution.

    It is customary to use relative positioning to create a positioning context for absolutely positioned elements. For example, to position the main column wrt the wrapper (its immediate parent), you would do something like:

    #wrapper {
  position: relative;
}

    You also specify display: inline; and float: left; for the #maincolumn element. I’m not sure why you would want to do that for an absolutely positioned element. Disabling both properties in Firebug does not alter the page layout at all.

    I’m not sure if any of this will help, but you might try them to see if they do. I don’t have immediate access to enough resources to do the necessary checks to see what happens elsewhere, although the page looks fine in Firefox on the Ubuntu 11 laptop I’m currently using.

    Cheers

    PAE

    Thread Starter jessandkeegan

    (@jessandkeegan)

    Thanks PAE.

    I’ve got it now to the point that the #maincol doesn’t move regardless of browser size (YAY!) but now the #leftcol and #header move. ??

    I added the #wrapper you suggested and cleared out all the erroneous floats and inline stuff. But still had the moving problem. So, I checked out the main template .php file and found this <div id="wrapper" class="clearfix" > Is this causing something? I’ve had a real hard time finding info on and understanding clearfix.

    I wasn’t suggesting you created a div with the id of wrapper. There already is one and an HTML page can only use an id once. So if you’ve created another div with the id of wrapper, you need to rename it to something unique and alter your CSS rule to suit.

    Also, please don’t post code like that. Firstly it’s against the forum rules, and secondly it’s entirely useless because if we have a link to your site we can access the stylesheet without the need for it to be posted here.

    Cheers

    PAE

    Thread Starter jessandkeegan

    (@jessandkeegan)

    Thanks. Like I said, no experience with this stuff.

    I do appreciate the help.

    – Jess

    Hmm. Yes.

    You might also like to validate the HTML on your pages. This is the validation for your home page:

    https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.doing-something.com%2Fblog%2F

    As you can see, there are tons of HTML errors, and I guess your other pages will have similar problems. This will make it very difficult for you to get a consistent browser rendering of your pages across all browsers and operating systems.

    Cheers

    PAE

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Absolute Elements Moving when Viewed on Different Screens’ is closed to new replies.