Cross-Browsers Alignment

[wanttea]

I tried without using table when building a new page. I was very excited and started falling in love with CSS since after studying Centauri’s code, I began to have a better understanding and it became easier for me. As I was building it, I used IE for testing and it came up pretty good. The only thing that didn’t work for me was the top navigation. I tried to space the dotted white lines so they won’t be right next to the links but wasn’t successful.

Then after I was done, I almost got a heart attack when I tested them with Firefox and Netscape. All the alignment was off. What did I miss or not do right? Please help, thanks.

p.s. the area where the thumbnails are located differ from page to page that’s why my styles for that part are mostly in the html doc.

Please see CSS codes below, THANKS!

* {
margin: 0;
padding: 0;
}

/* Background */
body {
background-color: #f7f7f5;
background-image: url(images/index_bg.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font-family: Times New Roman, Times,serif;
}
/* css table */
#wrapper {
width: 683px;
margin: 0 auto;
padding: 5px;
}
/* links */
a {
color: #ad7f6b;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #000000;
}

/* sidebar */
.sidebar {
background-image: url(images/residential/sidebar.gif);
width: 149px;
height: 483px;
float: left;
margin-top: 40px;
}
/* side links */
.sidebar ul {
width: 120px;
border-left: 1px dotted white;
margin: 20px 0 0 15px;
height: 450px;
}
.sidebar li {
list-style: none;
}
.sidebar a {
color: #FFFFFF;
text-align: right;
font-size: 12px;
line-height: 20px;
text-decoration: none;
width: 120px;
display: block;
}
.sidebar a:hover {
color: #000000;
}
.sidebar .first {
font-weight: bold;
padding-top: 10px;
border-top: 1px dotted white; margin-top: 18px;
}

/* top navigation */

.topmenu ul {
margin: 20px 0 0 0;
padding: 0 0 0 110px;
height: 450px;
}
.topmenu li {
padding:0 5px 0 0px;
float:left;
}
.topmenu .whiteline {
border-left: 1px dotted white;
}
.topmenu a {
color: #FFFFFF;
text-align: right;
font-size: 12px;
text-decoration: none;
display: block;
}
.topmenu a:hover {
color: #000000;
}

/* Middle Background */

.middlebg {
background-image: url(images/residential/middlebg.gif);
width: 560px;
height: 454px;
float: right;
margin-top: -483px; margin-left: 150px;
}

[edited by: Robin_reala at 6:43 am (utc) on May 25, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[Veil]

Hi there. It's pretty hard to find out what's going wrong from only the CSS. Could you make an example, also include the HTML, and indicate where it goes wrong exactly?

[bluesmandeluxe]

Also, a good rule of thumb for the future ... always test using FF first. This way if it works you will know that your css is sound and if it is blowing up in IE, you can make a second css for ie only - modifying ONLY those items that are needed to make IE behave.

Then, in your head tag, simply place a conditional expression for IE to use, like:
<!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" /><![endif]-->

This will force IE to use any css instructions in that file regardless of if they are also in your normal css.

This has saved me countless debugging hours.

[Marshall]

Correct me if I am wrong, but shoould not Times New Roman be in quotes: font-family: "Time New Roman",Times,serif;

This may cause the more complaint browsers to render wrong.