...

View Full Version : CSS Cross-browser compatibility issue in IE



kaitimae
01-14-2008, 03:16 AM
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? :mad:

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/deltachurch.net/index4.php

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

Specific CSS in question:


.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 :rolleyes:

Jakeumms
01-14-2008, 04:12 AM
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.


<!--[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.

<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


<!--[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.

srule_
01-14-2008, 05:41 AM
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):


.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:


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.

Excavator
01-14-2008, 05:42 AM
Hello kaitimae,
Just messing around with it a little, looks like your box model (http://www.w3.org/TR/REC-CSS2/box.html)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 -
* {
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.

.

kaitimae
01-14-2008, 06:35 PM
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 :cool:

kaitimae
01-15-2008, 12:15 AM
Thanks everyone for your help. I finally have the problem solved http://designsonfire.com/sites/deltachurch.net/index4.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum