IE/Firefox Layout Woes - Please Help Me?

[leonarmston]

Still strugglin with this problem, would really appreciate it if someone could help me out. I get two different views of my site, get the correct view in firefox

But in Internet Explorer I the whole layout moves to the right and the calendar in the article <div> goes below the whole layout. I have enclosed the css at the bottom.


The website address is www.toonight.co.uk

The calendar is Calendar Express 2 and is made from tables.

Here is a similar website that was on php lites homepage with a similar layout to what i need.

If anyone could help me out it would be greatly appreciated and there may be a small gift if u could help me out

Code: Select all

body {
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 9pt;
  background-color: #BDE3F9;
}

a {
    text-decoration: none;
    color: #2489DB;
}

a:hover {
    color: #808080;
}

a img {
    border: 0;
}

h3 {
    font-size: 1.3em;
    margin: 0 0 5px 0;
    padding: 2px 0px 0px 0px;
}

#bg { 
    width: 760px;
    margin: 0 auto;
    padding: 5px 10px 10px 10px;    
}


#content {
    padding-top: 9px;
    color: #303030;
    width: 700px;
    padding-left: 2px;
    
}

#toplinks {
    height: 20px;
    background: #2489DB;
    text-align: right;
    padding-right: 10px;    
    padding-top: 5px;
}

#toplinks a {
    font-size: 8pt;
    display: inline;
    padding-left: 8px;
    padding-right: 5px;
    background: url(strelica.gif) left no-repeat;
    padding-bottom: 3px;
    margin-right: 5px;
    color: #fff;
}

#toplinks a:hover {
    border-bottom: 2px solid #fff;    
}

#title {
    clear: both;
    margin: 0px 0px 0px 0px;
    height: 91px;
    width: 700px;
    background: url(banner.gif) /*repeat-x*/;
}

#navigation {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    background: url(navbar1.gif) top left no-repeat;
    height: 375px;
}

#navigation ul {    
    list-style: none;
    width: 150px;
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 1.1em;
}    

#navigation li {
    margin-bottom: 4px;
}

#navigation li a, #navigation li a:visited {
    text-align: right;
    height: 20px;
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 6px 8px 0 10px;
    background: #2489DB;
}    
    
#navigation li a:hover {
    background: #A9CAEB;
    color: #286ea0;
}

#recent_articles {
    float: right;
    width: 223px;
    margin: 0 0 10px 0;
    padding: 5px 13px 20px 10px;
    border: 2px solid #DDD;
    color: #5D5D5D;
    line-height: 1.5em;
    background-color: #FFFFFF;
}

#recent_articles p {
    margin: 0px;
    font-size: 90%;
}

#recent_articles h3 {
    font-size: 9pt;    
}

#recent_articles a {
    display: block;
    height: 12px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ccc;
}

#author {
    margin: 15px 0 0 0;
    border: 2px solid #fff;
    padding: 3px 3px 3px 6px;
    color: #70C256;
    border: 2px solid #DDD;
}

#author a, #author a:visited {
    display: inline;
    border: none;    
}

#article {
  
  border: 1px solid #000000;
  width: 700px;
  background-color: #BDE3F9;
    margin:  5px 0px 5px 0px;
    /*padding: 0px 0px 5px 6px;*/
    line-height: 1.4em;
}

/*#article h2 {
    margin: 0px;
    padding: 4px 0px 4px 0px;
    font-size: 10pt;
    font-family: Verdana, Arial, Sans-Serif;
}*/

/*#article p {
    margin: 0px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 9pt;
}*/

[masonbarge]

I'm no expert at this, but just off the top of my head, I am guess that IE is adding width to one of your boxes from padding or margins. Try taking all the padding and margins out (I'd use comments) and going from there.

This is one of the most aggravating problems around. It seems like such a simple thing but can cause such a big headache when you're doing a site from scratch. Just in case it makes you feel any better, LOL.

[masonbarge]

Right now it looks a mess in FF 1.5, also. Maybe you're working on it.

I'd take out the borders first thing and add them last. I will say it's a lot harder to troubleshoot a finished product, at least for somebody at my stage, than to follow steps in a certain order. Maybe one of the more experienced guys will be able to have a look.

[Ward]

Seems to be ok now in both FF1.5.0.1 and IE6 running on XP SP2, except for the recent articles box at the bottom which is way out on the right of both browsers...almost there.

[leonarmston]

Seems to be working now, just gotta fix 500+ validation errors. Though not sure whether to mess with calendar express the external calendar module i brought for this as it is all in tables. Any quick pointers to where i am going wrong mainly to get it valid?

[masonbarge]

Post your new code! I'd like to see how you fixed it.

[leonarmston]

Fixed it by making #bg and #content width larger. Solved the top links problem that the top menu was being larger than the tooNight banner by making the background-colour the same as the body then making a background image of the other blue in photoshop.

On my site where it says: Event Promoters/Venue Owners Click here to advertise them on tooNight is there anyway of making the click here text on two lines with css?

Code: Select all

body {
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 9pt;
  background-color: #BDE3F9;
}

a {
    text-decoration: none;
    color: #2489DB;
}

a:hover {
    color: #808080;
}

a img {
    border: 0;
}

h3 {
    font-size: 1.3em;
    margin: 0 0 5px 0;
    padding: 2px 0px 0px 0px;
}

#bg { 
    width: 1200px;
    margin: 0 auto;
    padding: 5px 10px 10px 10px;
}


#content {
    padding-top: 9px;
    padding-left: 2px;
  color: #303030;
    width: 1100px;
    
    
}

#toplinks {
    height: 20px;
    background: url(toplinkbar.gif) left no-repeat;
    text-align: left;
    padding-left: 230px;    
    padding-top: 5px;
}

#toplinks a {
    font-size: 8pt;
    display: inline;
    padding-left: 8px;
    padding-right: 5px;
    padding-bottom: 3px;
    margin-right: 5px;
    background: url(strelica.gif) left no-repeat;
  color: #fff;
}

#toplinks a:hover {
    border-bottom: 2px solid #fff;    
}

#title {
    clear: both;
    margin: 0px 0px 0px 0px;
    height: 91px;
    width: 930px;
    background: url(banner.gif) no-repeat;
    text-align: right;
}

#title h4{
  padding-right: 18px;
}

#navigation {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    background: url(navbar1.gif) top left no-repeat;
    height: 375px;
}

#panel {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    background-color: #BDE3F9;
    height: 375px;
}

#navigation ul {    
    list-style: none;
    width: 150px;
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 1.1em;
}    

#navigation li {
    margin-bottom: 4px;
}

#navigation li a, #navigation li a:visited {
    text-align: right;
    height: 20px;
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 6px 8px 0 10px;
    background: #2489DB;
}    
    
#navigation li a:hover {
    background: #A9CAEB;
    color: #286ea0;
}

#recent_articles {
    float: right;
    width: 223px;
    margin: 0 0 10px 0;
    padding: 5px 13px 20px 10px;
    border: 2px solid #DDD;
    color: #5D5D5D;
    line-height: 1.5em;
    background-color: #FFFFFF;
}

#recent_articles p {
    margin: 0px;
    font-size: 90%;
}

#recent_articles h3 {
    font-size: 9pt;    
}

#recent_articles a {
    display: block;
    height: 12px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ccc;
}

#author {
    margin: 15px 0 0 0;
    padding: 3px 3px 3px 6px;
  border: 2px solid #fff;    
    color: #70C256;
    border: 2px solid #DDD;
}

#author a, #author a:visited {
    display: inline;
    border: none;    
}

#article {
  width: 550px;
  background-color: #BDE3F9;
    /*margin:  5px 0px 100px 100px;*/
    margin-left: 20px;
    line-height: 1.4em;
}

#article h2 {
    margin: 0px;
    padding: 4px 0px 4px 0px;
    font-size: 10pt;
    font-family: Verdana, Arial, Sans-Serif;
}

#article p {
    margin: 0px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 9pt;
}

[masonbarge]

Put a <br> in the middle of the line. Or use <pre> tag. Css is your servant, not your master

It would just be silly to add an id to the line, then create the id in css.