4 replies [Last post]
Darth
Offline
newbie
Berlin
Last seen: 17 years 50 weeks ago
Berlin
Timezone: GMT+1
Joined: 2004-10-14
Posts: 6
Points: 0

Hi,

i'm actually converting my Designwork to <div> only, away from table-using.

In IE i am now at the point that i could say: Completed

But Mozilla and Opera make different Errors, which you can see here: http://www.imperiale-garde.de

In Mozilla, there is a Space between the Footer and the Content-Part, which is in Opera extremely big and breaks my grey-line-border in both browsers.

Second there are my two Menu-Columns.
Both look OK under IE, but under Mozilla the RIGHT Column doesn't do the height to 100%, and in Opera the LEFT does this Sad

The Code is:

#left {
	float: left;
	left: 0px;
	width: 160px;
	height: 100%;
	min-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #24354a;
}
#right {
	float: left;
	left: 0px;
	width: 160px;
	height: 100%;
	min-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #24354a;
}

And then both Browsers break with the height of the Top-Menu, which also should have grey-line-borders on the bottom of this div.

After studying this Forum and some HowTo's about those themes, i'm not knowing any more about this.

Here's the complete CSS-Part für those DIV's:

 ###################### OVERALL SETTINGS ###################### */


body {
	text-align:center;
	margin: 20px 20px 20px 20px; 
	padding-bottom: 0px; 
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top: 0px; 
  	background-color: #000000;
  	
}
#alles {

	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	padding:0px 0px 0px 0px;
	text-align:left;
	width: 1002px;
	border-left: #999999 1px solid;
	border-right: #999999 1px solid;
	border-top: #999999 1px solid;
	border-bottom: #999999 1px solid;
}
#greyline {
	float: center;
	margin: 0px 0px 0px 0px;
	width: 1002px;
	height: 1px;
	background-color: #999999;
}
#greyline2 {
	float: center;
	margin: 0px 0px 0px 0px;
	width: 1002px;
	height: 1px;
	background-color: #999999;
}
#greyline3 {
	float: center;
	margin: 0px 0px 0px 0px;
	width: 1002px;
	height: 1px;
	background-color: #999999;
}
#logo {
	float: center;
	width: 1002px;
	height: 120px;
	margin: 0px 0px 0px 0px;
	background-color: #24354a;
}
#user3 {
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	padding:0px 0px 0px 0px;
	float: left;
	width: 1002px; 
	margin: 0px 0px 0px 0px;
	background-color: #24354a; 
    	text-align:left;
}
#inhalt {
	float: left;
	left: 0px 0px 0px 0px;
	width: 680px;
	margin: 0px;
	height: 100%;
	margin-top: 0px;
	padding: 0px 0px 0px 0px;
	background-color: #000000;
	border-left: #999999 1px solid;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
}
#spalten {
	margin-top:0px;
	padding:0px 0px 0px 0px;
	text-align:left;
	width: 1002px;
	height: 100%;
	
}
#links {
	float: left;
	left: 0px;
	width: 160px;
	height: 100%;
	min-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #24354a;
}
#rechts {
	float: left;
	left: 0px;
	width: 160px;
	height: 100%;
	min-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #24354a;
}
#footer {
	clear: both; 
	position: relative; 
	height: 20px;
	text-align: center;
	width: 1002px;
	background-color:#24354a;
}
#pathway {
	width: 1002px; 
	margin: 0px;
	background-color: #24354a; 
    	text-align:left;
}

Michael

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 18 years 1 week ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

Problem with Opera/Mozilla/IE -&gt; Footer

Hi

I'm afraid that you have said "IE:Completed" too soon Sad

A lot of the problems will be due to the first line of your page. When your first line says

<?xml version="1.0" encoding="iso-8859-1"?>

this causes Internet Explorer to show pages in "quirks mode" - which is a different, broken, rendering model and will cause visual differences between IE and other browsers.

Quirks mode is there as a legacy in IE so that it applies CSS in the same incorrect way that older versions of IE did. Without this line, IE will render your site in "standards mode" - much closer to the specifications on how CSS should work

Removing this <?xml... line may seem like a backward step because your site in IE will then show the same "errors" as all the other browsers. Take heart that this is actually a good thing, and that re-coding your CSS to work with IE in standards mode gives your site a good chance of looking correct in other browsers and systems.

Darth
Offline
newbie
Berlin
Last seen: 17 years 50 weeks ago
Berlin
Timezone: GMT+1
Joined: 2004-10-14
Posts: 6
Points: 0

Problem with Opera/Mozilla/IE -&gt; Footer

Hi,

ah after removing this line i got the same errors in IE.

And now i have to find this errors, no problem with time and so on, but where could these errors be?
May i have to look in some 'Hacks' or just use the standard for css? :?

Michael

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 18 years 1 week ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

Problem with Opera/Mozilla/IE -&gt; Footer

I find it's always useful to get a layout element to work in a different browser to IE, then hack it to get it to work in IE.

I'd start with addressing the HTML markup for your code, removing any element that's there just for layout purposes - e.g. your cleardot spacer gifs (and all the tables Smile) etc. This will then allow you to concentrate on positioning and styling the elements you need: start at the top and work your way down.

There are also a few issues with some of your CSS: for example, there is no "float: center;" http://www.w3schools.com/css/pr_class_float.asp

If you run into any specific problems, post them up here!

Darth
Offline
newbie
Berlin
Last seen: 17 years 50 weeks ago
Berlin
Timezone: GMT+1
Joined: 2004-10-14
Posts: 6
Points: 0

Problem with Opera/Mozilla/IE -&gt; Footer

Thanks for your fast answers Smile

I'll try this now, i see in all this my old 'How to get it with tables to work', and i should really go away from that Smile

Let's see what i can make the next hours Smile

Michael