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
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">
<table style="position: absolute; left: 0px; top: 0px; visibility: visible;" id="imgTbl" cellpadding="0" cellspacing="0">
<table id="imgTbl" width="730" border="0" cellpadding="0" cellspacing="0">
<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>
<!-- END: MainRight -->
And the CSS changes to go with it -
border: 5px solid #f00;
01-02-2010, 04:24 PM
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.
01-03-2010, 08:57 PM
Trying a different way, and its a lot better. Thanks for any looks / help