Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Positioning with browser error

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello boogily,
    Instead of nesting two divs to make that border... why not just use border? See about styling borders.
    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.
    Code:
    <!-- END: MainLeft -->
    </div>
    
    
    <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">
    <tbody><tr>
    <td id="home">
    
    <table id="imgTbl" width="730" border="0" cellpadding="0" cellspacing="0">
    	<tbody><tr>
    		<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">
    Products
    </td>
    </tr>
    </tbody></table>
    </div>
    
    <!-- END: Slider -->
    </div> 
    
    <!-- END: MainCenter --></div>
    
    <div class="mainRight">
    <!-- END: MainRight -->
    </div>
    And the CSS changes to go with it -
    Code:
    #slider {
    	width:730px;
    	height:480px;
    float: left;
    border: 5px solid #f00;
    	position:relative;
    	overflow:hidden;
    }
    .main {
    	margin-left: auto;
        margin-right: auto;
    	width:100%;
    overflow: auto;
    	background-color:#040403;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    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)

    Thanks

  • #6
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Trying a different way, and its a lot better. Thanks for any looks / help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •