Kill IE!!

This is a discussion on "Kill IE!!" within the Web Page Design section. This forum, and the thread "Kill IE!! are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Kill IE!!

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1  
Old Jun 29th, 2007, 15:56
Up'n'Coming Member
Join Date: Jun 2007
Location: Germany
Posts: 59
Thanks: 0
Thanked 0 Times in 0 Posts
Kill IE!!
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;
}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Jun 29th, 2007, 16:48
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
Fuzzee.. the links not working...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jun 29th, 2007, 17:37
Highly Reputable Member
Join Date: Apr 2007
Location: Kent, England
Age: 38
Posts: 560
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
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!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Jun 29th, 2007, 18:49
Up'n'Coming Member
Join Date: Jun 2007
Location: Germany
Posts: 59
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
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!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jun 29th, 2007, 19:54
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
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>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Jul 1st, 2007, 13:37
Up'n'Coming Member
Join Date: Jun 2007
Location: Germany
Posts: 59
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
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!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Jul 1st, 2007, 20:00
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Kill IE!!
That's the beauty of css. There is more than one way to do a lot of things.
Glad you got it!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
fierfox, fuzzee, site

« omg keep me away from tables !!! HELP!!! | firefox and Internet Explorer! »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 23:41.

Contact Us - Web Design & Development Forums - Archive - Top

Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Online Casino :: Web Hosting :: Football Betting :: Web Development India :: Football Stats :: Free Bets :: Extreme Clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42