Kill IE!!

fuzzee · #1 (**permalink**) Jun 29th, 2007, 15:56

I just finished my new site design: IN FIREFOX!

Then I opened the page in IE and almost fainted.

you guys can probably see why:

http://www.fuzzee.info/

Here is the HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome! | fuzzee.info</title>
<link rel="stylesheet" type="text/css" media="screen" href="default.css" />
</head>
	
<body>		
		
<div class="wrapper">
		
<div class="right"><img src="images/pipel.gif" height="400px" alt="" /></div>
<div class="left"><img src="images/piper.gif" height="400px" alt="" /></div>
							
<div class="page">
				
<div class="header">
<h3>Welcome!</h3>
</div>			
					
<div class="menu">	
<a href="?page=index">HOME</a>&nbsp;
<a href='?page=fs'>Upload</a> <a href='?page=links'>Links</a> <a href='forum'>Forum</a> <a href='?page=about'>About</a> <a href='?page=settings'>Settings</a> 	
</div>
					
<div class="content">
<h6>Welcome to fuzzee.info</h6>
<br>
<br>
Please log in or register to see the rest of the content.
<br>
<br>
A few things waiting on the inside are: Online file sharing, online bookmarking, games, and some more.
<br>
Man kann unten die Sprache auf Deutsch wechseln!				
</div>
					
<div class="footer">		
<a href='?page=index&language=ger&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6'><img src='images/german.gif' style='border:none;' alt='german' /></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;<a href="?page=login&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6" style="font-size:10px;">login</a> or <a href="?page=register&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6" style="font-size:10px;">register</a>&nbsp;&nbsp;&nbsp;		
<a href="http://jigsaw.w3.org/css-validator/validator?uri=www.fuzzee.info" style="text-decoration:none;">
<img style="border:none;" src="images/css.png" alt="Valid CSS!" />
</a>
<a href="http://validator.w3.org/check?uri=www.fuzzee.info" style="text-decoration:none;">
<img style="border:none;" src="images/xhtml.png" alt="Valid XHTML 1.0 Strict" />
</a>
</div>
					
</div>

</div>
</body>
</html>

and the css:

Code: Select all

* {
    margin: 0;
}

html, body {
    height: 100%;
}

img:hover, img { margin:0px;padding:0px;border:0px; }

a, a:link, a:visited, a:active, a:hover { margin:0px;padding:0px;border:0px; }

body {
    text-align: center;
    color:#000000;
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    background-image:url('images/bgmain.gif');
}

h3{
    margin:0px;
    padding:0px;
    color:white;
    font-size:20px;
}

h6{
    margin:0px;
    padding:0px;
    font-size:16px;
}

p {
    color:#000000;
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
}

a:link, a:visited, a:active {
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    text-decoration:underline;
    color:#17621C;
}

a:hover {
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    text-decoration:overline;
    color:#17621C;
}

.wrapper {
    background:transparent;
    width: 532px;
    height: 100%;
    text-align: center;
    border-color:red;
    border-style:solid;
    border-width:0px 0px 0px 0px;
    min-height: 400px;
    margin: 0 auto;
}

.header {
    margin: 0 auto;
    width:389px;
    color:white;
    text-align:center;
    padding:5px;
    background-image:url(images/blue.gif);
    border-color:#000000;
    border-style:solid;
    border-width:1px 1px 1px 0px;
}
    

.menu {
    background: #fff;
    margin: 0 auto;
    width:398px;
    height:20px;
    text-align:center;
    background-image:url(images/background.gif);
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 0px 1px;
    padding:0px;
}

.footer {
    width:398px;
    height:20px;
    margin: 0 auto;
    background: #fff;
    background-color:#B6C7C1;
    background-image:url(images/background.gif);
    text-align:center;
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 1px 1px;
}

.content {
    overflow:auto;
    height:340px;
    /*width:400px;*/
    text-align:left;
    padding: 10px 10px 4px 10px;
    background:#FFFFFF;
    background-image:url(images/bgtd.jpg);
    background-repeat:no-repeat;
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 0px 1px;
}
 
.right {
    height:420px;
    display:inline;
    float:left;
}

.page {
    width:400px;
    background:transparent;
    padding:0px 30px 0px 0px;
    display:inline;
}
    
.left {
    height:420px;
    display:inline;
    float:right;
}

Lchad · #2 (**permalink**) Jun 29th, 2007, 16:48

Fuzzee.. the links not working...

VanessaJW · #3 (**permalink**) Jun 29th, 2007, 17:37

The link works for me! I see what you mean Fuzzee, in Opera it works, but in IE the box drops right down. I had a similar thing on a site where things displayed under each other in IE instead of next to each other and I just had to change the order of things in the html to fix it. I'm sure someone will be able to help you more specifically though, I'm not that good yet!

fuzzee · #4 (**permalink**) Jun 29th, 2007, 18:49

the link works for me... and that is the problem: the middle box drops down below the 2 div's with the images. Could it e something with the width of the middle div??

to see it right, look at it in Firefox (or Opera I guess).

I am also free to suggestions/critique about the site itself!

Lchad · #5 (**permalink**) Jun 29th, 2007, 19:54

Ok.. both pipe images need to have a width set of 66px.

The content div width needs to be set to 375px.

Then you need to change the order. Left pipes, content, right pipes.

Content div needs to float left.

That will put everything in order. Here is the corrected code:
CSS:

Code: Select all

* {
    margin: 0;
}

html, body {
    height: 100%;
}

img:hover, img { margin:0px;padding:0px;border:0px; }

a, a:link, a:visited, a:active, a:hover { margin:0px;padding:0px;border:0px; }

body {
    text-align: center;
    color:#000000;
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    background-image:url('images/bgmain.gif');
}

h3{
    margin:0px;
    padding:0px;
    color:white;
    font-size:20px;
}

h6{
    margin:0px;
    padding:0px;
    font-size:16px;
}

p {
    color:#000000;
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
}

a:link, a:visited, a:active {
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    text-decoration:underline;
    color:#17621C;
}

a:hover {
    font-size:12px;
    font-family:Courier New, Courier, verdana, arial, sans-serif;
    text-decoration:overline;
    color:#17621C;
}

.wrapper {
    background:transparent;
    width: 532px;
    height: 100%;
    text-align: center;
    border-color:red;
    border-style:solid;
    border-width:0px 0px 0px 0px;
    min-height: 400px;
    margin: 0 auto;
}

.header {
    margin: 0 auto;
    width:389px;
    color:white;
    text-align:center;
    padding:5px;
    background-image:url(images/blue.gif);
    border-color:#000000;
    border-style:solid;
    border-width:1px 1px 1px 0px;
}
    

.menu {
    background: #fff;
    margin: 0 auto;
    width:398px;
    height:20px;
    text-align:center;
    background-image:url(images/background.gif);
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 0px 1px;
    padding:0px;
}

.footer {
    width:398px;
    height:20px;
    margin: 0 auto;
    background: #fff;
    background-color:#B6C7C1;
    background-image:url(images/background.gif);
    text-align:center;
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 1px 1px;
}

.content {
    overflow:auto;
    height:340px;
    /*width:400px;*/
    text-align:left;
    padding: 10px 10px 4px 10px;
    background:#FFFFFF;
    background-image:url(images/bgtd.jpg);
    background-repeat:no-repeat;
    border-color:#000000;
    border-style:solid;
    border-width:0px 1px 0px 1px;
    width: 375px;
    float: left;
}
 
.right {
    height:420px;
    display:inline;
    float:left;
}

.page {
    width:400px;
    background:transparent;
    padding:0px 30px 0px 0px;
    display:inline;
}
    
.left {
    height:420px;
    display:inline;
    float:right;
}

HTML

Code: Select all

<body>        
        
<div class="wrapper">
        
<div class="right"><img src="images/pipel.gif" alt="" width="66" height="400px" /></div><div class="content">
<h6>Welcome to fuzzee.info</h6>
<br>
<br>
Please log in or register to see the rest of the content.
<br>
<br>
A few things waiting on the inside are: Online file sharing, online bookmarking, games, and some more.
<br>
Man kann unten die Sprache auf Deutsch wechseln!                
</div>
<div class="left"><img src="images/piper.gif" alt="" width="66" height="400px" /></div>
                            
<div class="page">
                
<div class="header">
<h3>Welcome!</h3>
</div>            
                    
<div class="menu">    
<a href="?page=index">HOME</a>&nbsp;
<a href='?page=fs'>Upload</a> <a href='?page=links'>Links</a> <a href='forum'>Forum</a> <a href='?page=about'>About</a> <a href='?page=settings'>Settings</a>     
</div>
                    

                    
<div class="footer">        
<a href='?page=index&language=ger&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6'><img src='images/german.gif' style='border:none;' alt='german' /></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;<a href="?page=login&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6" style="font-size:10px;">login</a> or <a href="?page=register&PHPSESSID=7498acf3a8bf0309bc0adf41e55fc6b6" style="font-size:10px;">register</a>&nbsp;&nbsp;&nbsp;        
<a href="http://jigsaw.w3.org/css-validator/validator?uri=www.fuzzee.info" style="text-decoration:none;">
<img style="border:none;" src="images/css.png" alt="Valid CSS!" />
</a>
<a href="http://validator.w3.org/check?uri=www.fuzzee.info" style="text-decoration:none;">
<img style="border:none;" src="images/xhtml.png" alt="Valid XHTML 1.0 Strict" />
</a>
</div>
                    
</div>

</div>
</body>
</html>

fuzzee · #6 (**permalink**) Jul 1st, 2007, 13:37

sorry for not responding earlier, I was really busy the last 2 days!

I fixed it! I think my main prolem was the order of the divs. I did it a bit different than above, but if you go look now, youll see it actually works.

Thanks a lot for your help!

Lchad · #7 (**permalink**) Jul 1st, 2007, 20:00

That's the beauty of css. There is more than one way to do a lot of things.
Glad you got it!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
button to kill process	kal	JavaScript Forum	3	Dec 13th, 2005 21:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Kill IE!!