View Full Version : Positioning with browser error

01-02-2010, 07:39 AM
I created a site in which the middle content has 2 layers, 1 nested in the other. The first one is bigger with a different color than the nested one. The nested one is centered via margins, thus creating a nice border. Or so I thought...

I tested in Chrome and Safari, it works great. IE has it shifted a bit to one side, Firefox has it shifted to the OTHER side. I've read through forums for a bit now, and still don't get it. I can't really put code up on here cause it is a bit complex.

Heres the url http://www.designbyryanboog.com/spa/

I'm about to bang my head against the wall. Anyone who can help me is an absolute CSS stud!! Thanks in advance:thumbsup:

01-02-2010, 08:29 AM
Hello boogily,
Instead of nesting two divs to make that border... why not just use border? See about styling borders (http://www.w3schools.com/css/css_border.asp).
Get rid of .mainCenter and put a border: 10px solid #a99d77; around #slider.

The validator finds a few things that you could fix. See the links about validating in my sig below.

Here's some code to try. First, delet the bits highlighted in red from your markup.

<!-- END: MainLeft -->

<div class="mainCenter" id="main" align="center">

<div class="slider" id="slider">
<div id="scroll_links">
<table style="position: absolute; left: 0px; top: 0px; visibility: visible;" id="imgTbl" cellpadding="0" cellspacing="0">
<td id="home">

<table id="imgTbl" width="730" border="0" cellpadding="0" cellspacing="0">
<td colspan="7">
<img src="images/menu_01.jpg" alt="" width="730

snip ... /

<td width="730" height="480">
<img src="images/switch1.jpg" width="1200" height="480"></td>
<td id="products" width="730" bgcolor="#fff6da" height="480">

<!-- END: Slider -->

<!-- END: MainCenter --></div>

<div class="mainRight">
<!-- END: MainRight -->

And the CSS changes to go with it -

#slider {
float: left;
border: 5px solid #f00;
.main {
margin-left: auto;
margin-right: auto;
overflow: auto;

01-02-2010, 04:24 PM
I agree that would work, the only issue I'm having is that right now there is, in effect, 2 borders. A slim, 1 pixel border around the #slider and then that 10px margin border around that. It may seem picky, but I would like to keep that 1px border and the bigger border. Most of the other errors were in the javascript, but that works properly.

Do you have any ideas on how I could keep both of those borders, and have them work on all browsers? Thanks

01-02-2010, 04:40 PM
Your approach of using tables and sliced images for your layout is very bad. Get inspired from http://www.hotdesign.com/seybold/!

Try to position a big <div> at the centre and add a thick border to it. Then add an inner div and apply a single background image, after adding a 1px black border to it. Then make an unordered list of four items, containing that four anchors. Then apply the respective image s;ices as background and then position them absolutely, with different top/bottom and/or left/right. In that way, your document would become semantic (http://boagworld.com/technology/semantic-code-what-why-how)!

01-03-2010, 05:43 PM
Abduraooft, can't believe I never thought of this idea. I am pretty old school in the web biz. It was easy to setup and do, and a lot less weight on the site. Plus I like how the border idea eliminates the margin errors with browsers.

Now there is only one problem. The absolute positioned divs (imageslices) stay put when the image scrolls via javascript. I first set it ALL up as divs, and the javascript then broke. (I think it even says in the documentation to use a table setup :( ) Now I have it setup correctly, It works great in all browsers except firefox. I will keep investigating and trying, but can't seem to find a way to get Firefox to cooperate. Any help would be great though. (you've already helped a ton)


01-03-2010, 08:57 PM
Trying a different way, and its a lot better. Thanks for any looks / help