White space Problem.

Internet Explorer white space problem.

Page 1 of 1

4 Replies - 2017 Views - Last Post: 26 November 2010 - 04:23 AM

#1 Ruptr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 23-November 10

White space Problem.

Posted 23 November 2010 - 06:32 PM

Hi everyone, I am new to the forums and so far I am liking what I see. I came here hoping to get some help on a problem I am having on with white space above and under a search box. It seems to only occur in Internet Explorer. I have posted an image to help further explain my problem. Also below is the code I am using for the first page. Any help is greatly appreciated.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Illicit World of Warcraft guild on Drak'Thul Alliance." />
  <meta name="keywords" content="world of warcraft, guild, illicit, wow, drak'thul" />

 
<title><Illicit> - World of Warcraft Drak'Thul Alliance Guild</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
	font-size: 18px;
	font-weight: bold;
	color: #f18901;
}
-->
</style>
</head>

<body>

<div id="main_bg"><div id="main">

    <div id="header">
      <h1></h1>
    </div>
    <div id="seperator">
      <div id="left_column">
      <div class="nav_header"><img src="images/nav_header.png"></div>
       	  <div id="navigation">
       	  	<a href="#">Home</a>
            <a href="#" onclick="javascript:alert('Under Construction!')">Forums <small>-Join Now!</small></a>
            <a href="#" onclick="javascript:alert('Under Construction!')">Guides</a>
            <a href="#" onclick="javascript:alert('Under Construction!')">Media</a>
            <a href="#" onclick="javascript:alert('Under Construction!')">Guild <small>-Illicit</a>
            <a href="#" onclick="javascript:alert('Under Construction!')">Contact</a>            
          </div>
              <div id="goblin"><img src="images/Editables/Renders/goblinrender.png"></div>
         </div>
        <div id="middle_column">
		  <div class="date_break"><img src="images/middle_header.png"></div>
          <div class="post">
            <h1>Welcome to - READ THIS!</h1>
            <div class="post_body">
              <p align="center" class="style1">Welcome to Illicit</p>
<ul>
<li><b>A.  About Us</b></li>
    <p>
      Text
    </p>
<li><b>B. The Future</b></li>
<p>
      Text</p>


<li><b>E. What we need</b></li>
<p>
      Text</p>


<li><b>F. Joining us?</b></li>
<p>
      Text   </p>
</ul>
         
  
            </div>
        </div>
</div>
        <div id="right_column">
        <div class="box_chainlink"><img src="images/lgrg_chainlink.png"><a href="#" class="lgrg">Register</a> <a href="#" class="lgrg">Login</a></div> 
            <div class="box">
            <div class="nav_header"><img src="images/Search_text.png"></div>
<form action="http://www.google.com/cse" id="cse-search-box">
<input type="text" name="q" class="search_input" value="Search Website" />
<input type="submit" name="sa" value="Search" class="search_button" />
</form>
</div>
          <div class="box">Screenshot of the Day Here
        </div>
        <br clear="all">
    </div>
	<div id="footer">
    <div id="subnav"><a href="#">Home</a> | <a href="#">Forums</a> | <a href="#">Guides</a> | <a href="#">Media</a> | <a href="#">Guild</a> | <a href="#">Contact Us</a></div>
    <span class="copyright">World of Warcraft&reg; and Blizzard Entertainment&reg; are all trademarks or registered trademarks of Blizzard Entertainment in the United States and/or other countries. <br> These terms and all related materials, logos, and images are copyright &copy; Blizzard Entertainment. This site is in no way associated with or endorsed by Blizzard Entertainment&reg;.</span></div>
    
</div></div>


</body>
</html>




/* Stylesheet 1 -------------------------------*/

body { margin:0; font:15px Tahoma; color:#d8f2ff; background:url(../images/deathwing.jpg) 50% 0 #151a20 no-repeat; background-attachment: fixed; } 
 
#main_bg { background:url(../images/main_bg.png) repeat-y; width:1064px;   margin:0px auto; }
#main { width:1004px; height: auto; margin:0 auto; }

#header { height:162px; background: url(../images/main_header.png) center no-repeat; padding:0 20px;}
#header h1 {padding-top: 40px; margin:0; color:white; }

#seperator { clear:both; background:url(../images/border_b_1.gif) repeat-x; padding:20px 10px; }	
	
#left_column { width:195px; float:left; }

#goblin img { margin: 2px 0 0 12px; width: 160px; height: 202px;}

#navigation a { background:url(../images/button_bg.png) no-repeat; width:170px; height:25px; display: block; padding-left:27px; margin:6px 0; font-size:13px; color: #767676; text-decoration: none; font-weight: bold; line-height:23px; float: left;}

.nav_header { text-align: center; }

#navigation a:hover { background-position: 0 bottom; color: #b77a16;  }



#more_information { padding-top:15px;}
		
#middle_column { float:left; width:550px; margin:0px 20px; }
		.date_break { font-size:19px; height: 30px; margin-bottom:0px; text-align: center; }
		.post { background:url(../images/40p_bg.png); border-left:1px solid #3b3b3b; border-right:1px solid #3b3b3b; border-bottom:1px solid #3b3b3b; margin-bottom:35px; line-height:21px; } 
		.post h1 { background:url(../images/title_bg4.png) repeat-x #0d2368; padding:2px 10px; margin:0; font-size:15px; color:white; } 
		.post_body { padding:5px 15px; color: #cccccc; line-height: 25px; font-size: 16px; }
		.post .postedby { float:left; clear:both; }
		.post .timestamp { float:right }

		ul { margin:20px; padding:10px; }
		li { list-style:none; background:url(../images/bullet.png) 0 7px no-repeat;  padding-left:30px; line-height:25px; display: block;  }
		.list_left, .list_right { width:48%; float:left }

		.post_info { clear:both; padding-top:10px; }
	
	#right_column { width:195px; float:left; }
	#right_column a:hover { color: #b77a16; }
	.lgrg { background: url(../images/anylink_bg.png) no-repeat; width: 170px; height: 45px; display: block; text-align: center; line-height: 43px; text-decoration: none; font-weight: bold; font-size: 16px; color: #CCCCCC; }
		.box { background:url(../images/40p_bg.png); border:1px solid #3b3b3b; margin:23px 0 25px 0; padding: 1px 5px 1px 5px; }
		.box_chainlink { background:url(../images/40p_bg.png); border:1px solid #3b3b3b; margin:23px 0 25px 0; padding: 0 10px 0 10px; }
		
	 .search_input { border: 1px solid #3b3b3b; background: url(../images/40p_bg.png); color: #767676; width: 175px; margin: 0 2px 0 2px; font-size: 12px; }
	.search_button { margin: 5px 0 0 45px; border: none; background: url(../images/searchbutton_bg.png); width: 91px; height: 29px; color: #CCCCCC; font-weight: bold; font-size: 12px; }
	.search_button:hover { color: #b77a16; }
#footer { clear:both; padding:20px; }
	#subnav { margin:10px 0;}	
	#subnav a { color:#767676; }
	#subnav a:hover { color:#b77a16; } 
	.copyright { font-size:10px;}

Attached image(s)

  • Attached Image

This post has been edited by Ruptr: 23 November 2010 - 06:42 PM


Is This A Good Question/Topic? 0
  • +

Replies To: White space Problem.

#2 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: White space Problem.

Posted 24 November 2010 - 12:43 AM

Just a tip for any future posts, only post the code that is relevant to the problem. When you code dump people are less likely to take a look at your problem as they will need to go through all the code to find the part that is giving the problem.

Have you tried putting the following in your css (right on top).

*{padding:0px; margin0px;}

All browsers have their own formatting which is different to all the rest, by doing this you are telling them all to have 0 padding and margin so when you apply a margin or padding to an element it will be from 0. I also use * to define stuff like font, font size, line height and so on that I would like to have carried through my whole site, that why I don't need to repeat it in every element. It saves on coding and page loading time.

Test it and see if it works - you might have to adjust some of your other elements after this but it's one of those good practice things ;)
Was This Post Helpful? 0
  • +
  • -

#3 Guest_ruptr*


Reputation:

Re: White space Problem.

Posted 24 November 2010 - 03:12 PM

Alright, i'll be sure to only post the code that is relevant next time.

Unfortunately, using the code you posted does not make any noticeable change to the problem I am having. I'm not sure what to do, I have tried a variety of different attempts. Any other help is much appreciated.
Was This Post Helpful? 0

#4 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1111
  • View blog
  • Posts: 3,059
  • Joined: 28-November 09

Re: White space Problem.

Posted 24 November 2010 - 05:10 PM

Use a CSS reset sheet from somewhere like Yahoo! and if that doesn't work try using an IE only conditional in the CSS to tweak it.
Was This Post Helpful? 0
  • +
  • -

#5 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Re: White space Problem.

Posted 26 November 2010 - 04:23 AM

To get around the issues along all the browsers you may set initially padding and margin attributes to auto;
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1