IE/Firefox Layout Woes - Please Help Me?

leonarmston · #1 Feb 6th, 2006, 13:05

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 · #2 Feb 6th, 2006, 13:13

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 · #3 Feb 6th, 2006, 15:14

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 · #4 Feb 6th, 2006, 17:44

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 · #5 Feb 6th, 2006, 18:44

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 · #6 Feb 7th, 2006, 11:58

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

leonarmston · #7 Feb 7th, 2006, 16:04

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 · #8 Feb 8th, 2006, 13:29

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Layout Issues (IE vs Firefox)	Keith	Web Page Design	5	Feb 11th, 2008 23:22
Differences between Firefox and IE layout	pesho318i	Web Page Design	9	Jan 31st, 2008 17:43
CSS Layout issue between IE and Firefox	macu	Web Page Design	2	Aug 22nd, 2007 14:14
A Small layout problem in IE6 but not in Firefox	leroytrolley	Web Page Design	1	Jul 5th, 2007 13:49
Row layout in Firefox	Tomarse	Web Page Design	6	Apr 16th, 2007 10:20

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
IE/Firefox Layout Woes - Please Help Me?