Space between banner and layout

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Space between banner and layout

Post by theda »

Well on my website (dumbass.ionichost.com), when viewed in IE, it shows the banner touching the rest of the page, but in FF, it shows a 1-2px space between it. Is there a way to fix this?

the code where the problem is:

Code: Select all

<p><a href=&quote;http://dumbass.ionichost.com&quote;>
<img src=&quote;http://img.photobucket.com/albums/v190/h2theda/ban_low.jpg&quote; alt=&quote;theda&quote; title=&quote;theda&quote; width=&quote;750&quote; height=&quote;150&quote; /></a>
<a id=&quote;top&quote;></a></p>
<h1>silence only worked for mimes &#1111;page loadtime: 0.33 ]</h1>
and here's the stylesheet governing it:

Code: Select all

<style type=\&quote;text/css\&quote; media=\&quote;screen\&quote;><!--
				html { 
				  padding:0px;
				  margin:0px;
				}

				body {
				  font-size: 12px;
		 		  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
 				  text-align:center;
					margin:0px;
					padding:0px;
				}



				p,pre, h1 {
				margin:0px 10px 10px 10px;
				}

				h1 {
				font-size:14px;
				padding-top:10px;
				text-transform:uppercase;
				}

  				a:link { 
				color: #000000;
				font-size: 11px;
				background:transparent;
				text-decoration: none; 
				}
 
				a:link:hover { 
				color: #808080;
				font-size: 11px;
				background:transparent;
				text-decoration: none; 
				}

				a:visited:hover { 
				color: #808080;
				font-size: 11px;
				background:transparent;
				text-decoration: none; 
				}

				a:visited { 
				color: #404040;
				font-size: 11px;
				background:transparent;
				text-decoration: none; 
				}

				pre { 
				font-size: 11px;
				font-family: Courier, Monaco, Monospace;
				}

				img {
				border: none;
				}

				#box {
				width:750px;
				margin: 0px auto;
				padding:0px;
				text-align:left;
				}

				#left {
				width:175px;
				padding:0px;
				float:left;
				}

				#content {
				width:575px;
				padding:0px;
				float:left;
				overflow: auto;
				}


				#head {
				background:transparent;
 				color:#000000;
				}

				#head h1 {
				font-size: 11px;
				text-transform:uppercase;
				text-align: right;
				padding:5px 15px;
				margin:0px
				}

				#head p {
				padding:10px;
				margin:0px;
				}


	
 	
			--></style>
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Post by theda »

Since I've waited a while and had no response... I feel a reply might be in order...
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

OK,I'm looking at your site, in Safari. I checked through the splash page, choosing English.

I think I see the problem, but just to make sure. its the ~2px gap vertically between the banner and the main content that you wish to remove?

Also, do you need a pure CSS solution, or is minor tweaking of the HTML allowed?
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

OK, I'm not sure what's happening, so here's a fix, but I wish I knew why it was breaking in the first place...

to your rule for #head h1, change the margin rule from

Code: Select all

margin: 0px;
to

Code: Select all

margin: -3px 0 0 0;
  *margin: 0px;
(I hate using browser tricks, but it works here...

I beleive it looks correct in Gecko and KHTML engines (Firefox, Safari, Konquerer, etc) I haven't tested on Opera nor on MSIE. But the *hack should ensure that the MSIE rendere sees the same rule as before (all others ignore *names, it doesn't)

Maybe when I'm less tired I'll be able to figure out why it was breaking in the first place and thereby find a less hackish solution.

Also you can get rid of the <p>&nbsp;</p> at the top by adding a margin-top: 1em; to your #head rule, if you want.
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Post by theda »

Nielsene, I'll test out your little mods and see their outcomes.
Post Reply