12 replies [Last post]
illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

The site is at http://www.theblankeffect.com/test.shtml. I'm starting to work Movable Type into the layout, and the promo sections that I have in the sidebar are loading from a Movable Type include, but I don't think that really has anything to do with the problem I'm having.

Can you check the CSS to see what I'm doing wrong? For some reason the second <h2> ("this is a promo.." thing) is right below the first image in the sidebar when there should be a lot of space. The xhtml and CSS validate so I think I might be leaving something out.

Thanks!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

As usual, different fixes for different browsers.

Add margin-bottom:1em; to the #sidebar #promos img style

Add a class to the second h2 in the html (for IE):

<h2 class="newh2">This is a promo for something good</h2>

The style for that class:

* html .newh2{clear:both;height:1%}

BEFORE that h2 tag in the html, put this:

<div class="clear">&nbsp;</div>

And add some MORE style:

.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
}
* html .xclear{display:none} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/

Is that the effect you wanted? The divider bar between the content and the left bar isn't long enough either.

Trevor

illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Can you check out this spacing problem?

Well things are looking good in Mozilla now, but not IE. IE is back to pushing the images down to the bottom of the div, below #maincontent. Does this need another IE hack, or did I break something along the way?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

On my system IE6 and FF0.8 don't look massively different.

Tell you what. Why don't you take a screen grab of the way you want it and post that as a png or jpg using a url to your site where you store the image. Feel free to cut it up and paste the bits where you want them, add space where you want it.

Then I'll have a go at making it work.

Trevor

illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Can you check out this spacing problem?

Here are the screenshots. Firefox is doing it right, or at least close to right. I need to play with the spacing, but things are where they should be, for the most part.

http://www.theblankeffect.com/IE6.png

http://www.theblankeffect.com/firefox.png

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

Got the images. Funny thing. Firefox displays the page just like IE!

I'll play with it and get back to you.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

Wow! That was hard work. what a pain in the @ss IE is.

Essentially, you had 4 problems:

1. You put two of the clearing div's in where only one was needed.
2. Different browsers have different defaults for margin and padding. In future, design your sites so that for every tag you use you do this:

html, body,p,div,h1,h2,h3,h4,img,form{margin:0;padding:0;border:0} and so on. That way any settings you make will be the same across al browsers. Because you didn't declare zero's on some tags, that's why there were differences.

3. The 3 pixel jog float bug (IE Windows Version only, hence some extra weird comments, like /* \*/code here/* */, DO NOT DELETE any of the slashes and asterisks, you can put a comment in the last bit, but don't get rif of it!). Counter this with a 1% height for any conatiner next to the floated element (you'll see quite a few in the css).

4. Having added 1% height, in comes another bug. IE adds an extra 3 pixels padding to the right of the floated element, plus the width of any border on it, which in this case is another pixel. This indents text (and only text) inside containers to the right of the float, but doesn't affect borders or images). You will notice I had to reduce the padding of the sidebar container by 4px to compensate.

I have also fiddled around with margins to make them the same across browsers (I hope).

I have made so many changes it isn't practical to list them. Instead I attach the files (the page plus 2 css). WARNING: When doing this sort of work, I save the files as deletmexx.htm and the css and images in a subdirectory. Search through all files for the string:

deleteme1_files

and replace this with whatever the directory should be for you.

Trevor

illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Can you check out this spacing problem?

Looks good in Mozilla now, but Safari is now getting that problem with the image being pushed to the bottom. This is kinda weird because Safari has always been problem-free with this layout.

Here's the Safari screenshot. http://theblankeffect.com/IEfixes/safari.png

I have the changes you made here: file:///Users/coleman/Desktop/deleteme1.htm

Now I'm getting really confused, because the first promo is fine but the second one gets moved. I tried using another <div class="clear">&nbsp;</div> after the second promo but that didn't do it. Any ideas?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

illtron wrote:
I tried using another <div class="clear">&nbsp;</div> after the second promo but that didn't do it. Any ideas?

Hi

Just temporarily, did you try removing the clearing div's completely, just for safari?

If that works, then you need to hide the div from safari! How?

Add display:none to the .clear class style

then add a new style between the .clear class and the * html .clear IE hack:

.cl\65 ar{display:inline} Copy this exactly, as it needs a tab between the \65 and the ar. Safari can't read this style (which actually translates to .clear for most browsers! the \65 is an e, and the tab is ignored)

Trevor

illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Can you check out this spacing problem?

OK, I'm pretty sure that worked. There's a problem now with too much space between the promos in Moz and Safari. I changed the background on .clear to gray, and it looks like it's coming from that div.

Is this just a case of Mozilla and Safari not respecting the height set for that class?

It's at http://theblankeffect.com/test.shtml

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

Tony has just posted a new way to clear these div's safely, check out this thread:

http://www.csscreator.com/css-node/1667

Trevor

illtron
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Can you check out this spacing problem?

Trevor, can you check things to see if I did them right? I'm pretty sure I did, but now I've got the two promos bumping into each other again. I think I may have misunderstood the directions and introduced new problems, or at least old ones. Does this eliminate the need for the other hacks, like that div in between the promos for IE?

Also, can you check it out in IE? I have a feeling it probably looks just like it did when I started.

Thanks again

It's at http://www.theblankeffect.com/test.shtml[/url]

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you check out this spacing problem?

Hi

Again, made a few changes, again using deleteme1_files etc so hunt them out!

.floatcontainer:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
	}

/* Holly Hack Targets IE Win only \*/
* html .floatcontainer {height:1%}
/* End Holly Hack */
/* general stuff */

img	{
	display: block;
	border: 0;
	}
	
/* layout */

body {
	background: #ccc;
	color: #333;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	font-family: verdana;
	font-size: 11px;
	padding-bottom: 20px;
	}

#wrapper {
	background: #fff;
	color: #333;
	margin: 10px auto;
	padding: 0;
	border: 1px solid #333;
	width: 702px;  
	/* box model hack */	
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 700px;	 	 
	}
	
#header	{
	background: #333;
	color: #333;
	border: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	}
	
#header img {
	margin: 0;
	padding: 0;
	}
	
#pagebody {
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
	color: #333;
	background: #fff;
	float: left;
	width: 100%;
	}

#maincontent { 
	float: left; 
	margin: 0 0 10px 0;
	border-right: 1px solid #ccc; 
	padding: 10px; 
	width: 441px; 
	background: transparent;
	}
#sidebar {
	position: relative; 
	background: transparent; 
	color: #333; 
	padding: 0 10px 0 10px; 
	margin: 0 0 0 461px; /* 441 + 10 + 10 = #maincontent */ 
	}

/* \*/* html #sidebar{padding-left:6px;height:1%}/* Allows 4 pixels IE cock-up */

#footer {
	border-top: 1px solid #333;
	margin-top: 10px;
	padding: 10px;
	color: #333;
	clear: both;
	text-align: left;
	background: #fff;
	}
			
/* top navigation list */

#menu { 
margin: 0 auto; 
padding: 0; 
width: 700px; 
}

#menu ul { 
border: 0; 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-family: verdana; 
}

#menu ul li { 
display: block; 
float: left; 
text-align: center; 
padding: 0; 
margin: 0; 
background: fff; 
width: 140px; 
}

#menu ul li a { 
background: #fff; 
width: 139px; 
height: 2em; 
border-top: 1px solid #333; 
border-left: 1px solid #333; 
border-bottom: 1px solid #333; 
border-right: none; 
padding: 0; 
margin: 0 0 10px 0; 
color: #996; 
text-decoration: none; 
text-transform: lowercase; 
display: block; 
text-align: center; 
font-weight: normal; 
letter-spacing: 1px; 
line-height: 20px; 
font-size: 11px; 
}

#menu ul li a:hover { 
color: #fff; 
background: #996; 
}

#menu ul li a.first { 
border-left: none; 
width: 140px; 
}
	
/* paragraphs, links n things */

#maincontent p {
	line-height: 15px;
	font-size: 11px;
	margin: 10px 0 10px 0;
	}
	
#maincontent .date {
	line-height: 15px;
	font-size: 11px;
	margin: 10px 0 10px 0;
	text-align:right;
	}
	
#maincontent h1 {
	font-size: 20px;
	background: transparent;
	padding: 0;
	margin: 0;
	display: block;
	}
	
#maincontent h2 {
	font-size: 14px;
	background: transparent;
	padding: 0;
	margin: 0;
	display: block;
	}
	
#maincontent h1 a, #maincontent h2 a {
	color: #996;
	text-decoration: none;
	background: transparent;
	}	

#maincontent h1 a:hover, #maincontent h2 a:hover {
	color: #996;
	text-decoration: underline;
	background: transparent
	}

#footer p {
	border: none;
	background: #fff;
	margin: 0;
	padding: 0;
	}

#footer p a:link, #footer p a:visited {
	color: #996;
	text-decoration: none;
	background: transparent
	}

#footer p a:active {
	color: #333;
	text-decoration: none;
	background: transparent
	}

#footer p a:hover {
	color: #996;
	text-decoration: underline;
	background: transparent
	}
	
/* sidebar headers and stuff */

#sidebar dl {
	border-bottom: 1px #ccc solid;
 margin-bottom:5px;
 margin-top:5px;
	}
/* \*/* html #sidebar dl{height:1%}/* */
	
#sidebar dl dd {
	margin-left: 0;
	}

#sidebar dl dt, #sidebar h2 {
	font-size: 10px;
	color: #666;
	background: transparent;
	padding: 2px 3px 3px 6px;
	margin: 14px 0 0 0;
	display: block;
	border: 1px #ccc solid;
	font-weight: normal;
	}
/* \*/* html #sidebar dl dt{margin-top:10px}/* */
.newh2{margin-top:60px;margin-bottom:20px;display:block}
/* \*/* html .newh2{height:1%} /* IE sucks hack */

#sidebar #promos img {
	float: left;
	border-top: 0;
	border-right: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
	border-left: 1px #ccc solid;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
	
#sidebar .box {
	font-size: 10px;
	color: #666;
	background: transparent;
	padding: 2px 3px 3px 6px;
	margin: 0;
	display: block;
	border-top: 0;
	border-right: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
	border-left: 1px #ccc solid;
	font-weight: normal;
	}
	
#sidebar ul	{
	margin: 0;
	padding: 0;
	text-align: left;
	border: 0;
	}
	
#sidebar dl ul li {
	list-style: none;
	font-size: 10px;
	color: #666;
	background: transparent;
	padding: 2px 3px 2px 6px;
	margin: 0 0 0 0;
	display: block;
	border-top: none;
	border-right: 1px #ccc solid;
	border-bottom: none;
	border-left: 1px #ccc solid;
	font-weight: normal;
	}
	
#searchform{margin:0}

and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="deleteme1_files/basic.css" media="all">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.theblankeffect.com/index.rdf">
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.theblankeffect.com/atom.xml">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.theblankeffect.com/rsd.xml">

<style type="text/css" media="all">

#menu ul li a:link.first {
	background: #ccc;
	}

#menu ul li a:hover.first {
	background: #996;
	}
	
</style>

<style type="text/css" media="all">@import "sophisto.css";</style><title>The (blank) Effect</title></head>


<body>

<div id="wrapper">

<!-- header and top nav links -->

<div id="header"><img src="deleteme1_files/dirtyuncleheader.jpg" alt="temp"></div>

<div id="menu">
<ul>
<li><a id="home" class="first" href="http://www.theblankeffect.com/" title="Home">Home</a></li>
<li><a id="article" href="http://www.theblankeffect.com/articles" title="Articles">Articles</a></li>
<li><a id="about" href="http://www.theblankeffect.com/about.shtml" title="About The (blank) Effect">About T(b)E</a></li>
<li><a id="contact" href="http://www.theblankeffect.com/contact.shtml" title="Contact">Contact</a></li>
<li><a id="license" href="http://www.theblankeffect.com/licensing.shtml" title="Script licensing">Licensing</a></li>
</ul>
</div>

<!-- end header -->

<div id="pagebody">

<div id="maincontent" style="floatcontainer">

<div id="topshadow"><p>Here we go...</p></div>

<div id="midshadow">


<h1><a href="http://www.theblankeffect.com/articles/another_test_entry.html">Another test entry</a></h1>

<h2>By <a target="_blank" href="http://www.theblankeffect.com/">Chris Coleman</a></h2>

<p>This is a paragraph. This is a paragraph. A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.</p>


<p class="date">May 10, 2004</p>



<h1><a href="http://www.theblankeffect.com/articles/test_article.html">Test Article</a></h1>

<h2>By <a target="_blank" href="http://www.theblankeffect.com/">Chris Coleman</a></h2>

<p>This is a paragraph. This is a paragraph. A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.</p>


<p class="date">May 09, 2004</p>




</div>

<div id="bottomshadow"><p>That was fun</p></div>

</div>



<div id="sidebar">

<h2>Search The (blank) Effect</h2>
<div class="box"><form method="get" action="http://www.theblankeffect.com/cgi-bin/mt/mt-search.cgi">
<input type="hidden" name="IncludeBlogs" value="1">
<input id="search" name="search" size="20"> <input type="submit" value="Search"></form></div>

<dl><dt>» That's Poontastic</dt><dd><ul>
	<li>Item 1.  This is the first item in the list.  It's a long one.</li>
	<li>Item 2.  Don't forget to fix that space to the left.</li>
	<li>Item 3.  Hey, at least it's valid.</li>
</ul></dd></dl>



<div id="promos">



<h2 class="newh2">This is a promo for something good</h2>

<a href="http://www.theblankeffect.com/" title="link"><img src="deleteme1_files/dogpromo.jpg" alt="This is the alt text"></a>



<h2 class="newh2" style="margin-top:60px;display:block">This is a promo for something good</h2>

<a href="http://www.theblankeffect.com/" title="link"><img src="deleteme1_files/dogpromo.jpg" alt="This is the alt text"></a>



</div>

</div>

</div>


<div id="footer">

<p>
<a href="http://www.theblankeffect.com/copyright.shtml">Copyright ©</a> 2002 - 2004 <a href="http://www.theblankeffect.com/">The (blank) Effect</a> | 
Powered by <a href="http://www.movabletype.org/">Movable Type 2.661</a> | 
<a href="http://www.theblankeffect.com/index.xml">XML</a> |  
<a href="http://www.theblankeffect.com/index.rdf">RSS</a>
</p>

</div>

</div>

</body></html>

Trevor