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
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Cross-browser compatibility issue in IE

    I'm no expert with CSS but I know how to use it well enough to create nice looking websites. I'm trying to learn how to get rid of HTML tables altogether and right now I'm having an issue with cross-browser compatibility.

    Here's the problem ... I'm trying to get two columns of content to line up next to each other within a container div. I finally have everything looking great in Firefox but Internet Explorer is a total mess. Have I mentioned I hate IE?

    I've tried a bunch of different options with the display and position tags but nothing seems to work for BOTH browsers. I've really reached the end of my rope on this one, it's driving me absolutely crazy.

    I'm hoping someone out there with a bit more expertise be willing to look at this and help? Please?

    Dev page: http://designsonfire.com/sites/delta...net/index4.php

    The entire CSS file: http://designsonfire.com/sites/delta...css/style3.css

    Specific CSS in question:

    Code:
    .left {
    width:520px;
    left:300px;
    padding:0px;
    margin:0px;
    position: relative;
    display: table-cell;
    vertical-align:top;
    }
    
    .right {
    width:270px; 
    left:10px; 
    padding:0px;
    margin:0px;
    position: relative;
    display: table-cell;
    vertical-align:top;
    }
    Thanks so much in advance
    Last edited by kaitimae; 01-14-2008 at 03:23 AM.

  • #2
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I was having a similar problem where my custom text input looked fine in Firefox but looked messed up in IE. I figured out how to make it look nice in IE, but then it didn't look good in Firefox. Then I found this code. It says that if IE is open then whatever is inside of it will happen, but only in IE.

    Code:
    <!--[if IE]>
    (your content here)
    <![endif]-->
    You can use this in your head and body. But make sure not to use it inside of a css stylesheet. You'll have to make a seperate one inside of this code. For instance if you have a css class .style and you already have a bunch of code for it that work fine for both IE and FF.
    Code:
    <style type="text/css">
    .style {
    	width: 132px;
    	height: 21px;
    	border:0;
    	font-family:  Tahoma, verdana, arial,sans-serif;
    	font-size: 15px;
    	color: #563C21;
    	text-decoration: none;
    }
    </style>
    then when its in IE you want it to also do something else.
    You would have that code, then under it put

    Code:
    <!--[if IE]>
    <style type="text/css">
    .style {
    	padding:0;
    	margin:0;
    }
    <![endif]-->
    I hope that solves your problem.
    I'm not very good at css either but i'll try to help you to the best of my abilities if i can.
    Last edited by Jakeumms; 01-14-2008 at 04:14 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Hey,

    One reason it's not working that there is not enough room for both .left and .right inside of your container.

    your container has a width of 784px.
    Total of .left and .right = 790px (520 + 270)

    Try something like this(note: I used float instead of the left property):
    Code:
    .left {
    width:510px;
    float:right;
    padding:0px;
    margin:0px;
    }
    
    .right {
    width:270px; 
    float:left; 
    padding:0px;
    margin:0px;
    }
    the floats may result in some clearing issues. If this occurrence try adding:
    Code:
    clear:both;
    To the effected element. From looking over the code I think you may need to clear your footer & content Divs
    let me know how it goes :-)

    Another thing to keep in mind is not to name your divs by there position. Your .left div is currently on the right hand side of your site, which makes the code a bit confusing.
    Last edited by srule_; 01-14-2008 at 05:48 AM.

  • #4
    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 kaitimae,
    Just messing around with it a little, looks like your box model is off a little.
    #content is 784px wide with 8px of padding and 1px border on each side for 766px usable width.
    .left at 520px and .right with 270px don't quite fit with their total width of 790px.

    Is this actually working in IE6? It's broken here when I look at it in IE7 and FF2.

    For your two columns, you need to float the left column so the right will go alongside.
    Try making these changes to your CSS, just for starters. You will have to adjust your widths for this to work the way you want -
    Code:
    * {
    padding: 0;
    margin: 0;
    border: none;
    }
    #content {
    width: 900px;
    background-color: #666666;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    overflow: auto;
    }
    
    /*  S P E C I F I C   D I V S  */
    
    .left {
    width:520px;
    float: left;
    }
    
    .right {
    width:270px; 
    float: right;
    }
    #footer {
    width: 900px;
    height: 90px;
    background: url('http://www.designsonfire.com/sites/deltachurch.net/images/bottom.jpg') top center no-repeat;
    }
    You should also check the validator, see my sig for links.

    .
    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

  • Users who have thanked Excavator for this post:

    kaitimae (01-15-2008)

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You guys are awesome! I'm going to try all of your suggestions now, hopefully something will work... I'll update this to let ya know.

    I have to remove that padding from the container div, that's why it's not 790px. Thanks for the addition skillz

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks everyone for your help. I finally have the problem solved http://designsonfire.com/sites/delta...net/index4.php


  •  

    Posting Permissions

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