3 Problems: floated divs/<noscript> + style info/Google Maps link format invalid

[u01jmg3]

A few things I'm having problems with... can anyone help?

 

1.

Basically I have a parent <div> with 2 divs inside it. One of the divs is floated to the left and the other to the right. Now this works fine but the parent div takes no notice of the height of the 1st divs contents floated to the left, only to the height of the 2nd divs contents floated to the right. (Same in IE7 and FF2.) I only realised this problem because when javascript is enabled I use it to set the height of the parent div to be the entire screen height but when I was testing with javascript disabled the issue hits you straight in the face. My question is how do you get the parent div to acknowledge the height of the 1st divs contents? (See http://www.jonathangoode.co.uk/realize-scotland.co.uk/corporate_training and disable javascript)

 

2.

I tried to combat the problem of when javascript is disabled by inserting style information that hard codes the height of the parent div for a screen size of 1024x768 (amongst other things) but it doesn't validate as you aren't allowed style info within the <noscript> tag so my question is how do you set different style info or any other info when javascript is disabled? Within the <noscript> seemed like a perfect idea for no javascript but obviously not!

 

3.

My pages have a doctype of XHTML 1.0 Strict but I have a link to lookup an address on Google Maps and the W3C Validator doesn't like the format of the link, should I just ignore the error? (Comes up with 36errors in total.)

 

<a href=" http://maps.google.co.uk/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=Aberdeenshire,+Aberdeenshire,+AB42+4RJ&ie=UTF8&om=1&ll=57.521723,-1.985779&spn=0.627551,2.156067&z=10&iwloc=addr " title="locate on Google Maps">

 

Thanks!

[bronzemonkey]

1. Use this to clear the element that contains floats properly:

 

/*for modern browsers*/
#content:after {content: "."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;}
/*for IE7 only*/
*+html #content {min-height:1px;}
/*for IE6 only*/
* html #content {height:1%;}

 

 

2. Don't use noscript tags. Instead, I'd code the whole thing with non-javascript in mind first. You could then use DOM scripting to switch the class in the html for users that have javascript enabled.

 

 

3. The error coming from google maps is because of the & characters (possibly others) in the hyperlink. If it is a static link you can just replace every & with & to avoid the validation errors. If is a dynamic link you might be able to use some javascript or php to rewrite the character. Your website probably won't break as a result of those validation errors but ampersands that aren't properly encoded can sometimes cause problems.

[u01jmg3]

1.

Thanks very much for the code, works like a charm! Still needs a bit of tweaking as if you go to the page (See http://www.jonathangoode.co.uk/realize-scotland.co.uk/corporate_training and disable javascript) the white space at the bottom of the div is a little too much.

 

2.

Hmmm still stuck with this one then: I just want the styling info to be applied when javascript isn't enabled, hence why I enclosed it within <noscript> tags but I see your point to. Reason being one of the things I get javascript to do is push the address on the right down to the bottom once the page is loaded - to begin with in the css it's hidden and then javascript moves it applying a marginTop and then makes it visible again ONLY once the page is loaded so you see no flicker or it being moved. Obviously when there's no javascript I need it to be made visible again but by letting html do it you see the address in its original place then you see it flash and move to the bottom at the right which looks ugly as the page loads so I decided to only have it do this when javascript is disabled. So javascript when it's there and when it isn't, in the <noscript> tag use normal css/html styling. This make sense? You might ask why bother pushing the address to the bottom right and why stretch the div to the entire screen, well main reason was to make it look nicer especially on my 1920x1200 screen which it looks stupid if you don't!

 

3.

What an idiot I am, should have seen that a mile off - if only the validator gave a simple error message like "it's your amperstands"!

 

Cheers bronzemonkey.

[bronzemonkey]

You've got some bizarre markup that could do with cleaning up. No need to have so many divs with the same id and class. When you've got lists of links (horizontal or vertical), use an unordered list, and then style it (removing the bullets) with css. This will make your markup more semantic and help clear up all the whitespace issues.

 

You can try changing #courses into an unordered list and see if the whitespace still persists. I just quickly rewrote the markup and the whitespace issue disappeared:

 

<div id="header">
  <h1>Corporate Training... in the countryside.</h1>
  <span id="date">21-December-2007</span>
  <ul id="extra_links">
    <li><a href="http://www.addthis.com/bookmark.php" title="[bookmark]"><img src="images/bookmark.gif" width="13" height="13" alt="Bookmark" /></a></li>
    <li><a href="http://www.google.com/webmasters/sitemap/" title="[sitemap]"><img src="images/sitemap.gif" width="13" height="13" alt="Sitemap" /></a></li>
    <li><a href="http://www.google.com/analytics/" title="[statistics]"><img src="images/statistics.gif" width="13" height="13" alt="Statistics" /></a></li>
    <li><a href="http://www.jonathangoode.co.uk/" title="Created by Jonathan Goode."><img src="images/design.gif" width="13" height="13" alt="Created by Jonathan Goode." /></a></li>
  </ul>
</div><!-- end #header -->

<div id="side_nav">
  <a href="home-corporate_training"><img src="images/logo.gif" width="169" height="131" alt="Home" /></a>
  <ul>
    <li><a href="corporate_training">Corporate Training</a></li>
    <li><a href="professional_services">Professional Services</a></li>
    <li><a href="complementary_therapies">Complementary Therapies</a></li>
    <li><a href="outdoor_activities">Outdoor Activities</a></li>
  </ul>

  <div id="contact_info">
    <a href="http://maps.google.co.uk/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=Aberdeenshire,+Aberdeenshire,+AB42+4RJ&ie=UTF8&om=1&ll=57.521723,-1.985779&spn=0.627551,2.156067&z=10&iwloc=addr" title="locate on Google Maps"><img src="images/map.gif" width="28" height="28" alt="Locate On Google Maps" /></a>
    <p>Brucklay Castle Estate<br />Maud<br />AB42 4RJ<br /></p>
    <p>&#43;44&#40;0&#41;1771 619139</p>
    <p>info@realize-scotland.co.uk</p>
  </div><!-- end #contact_info -->
</div><!-- end #side_nav -->

<div id="top_nav">
  <ul id="breadcrumbs">
    <li>You are here:</li>
    <li><a href="/realize-scotland.co.uk/corporate_training">Corporate Training</a></li>
  </ul>
  <ul id="sub_nav">
    <li><a href="http://www.jonathangoode.co.uk/realize-scotland.co.uk/" title="Back To Intro">[..]</a></li>
    <li><a href="home-corporate_training">Home</a></li>
    <li><a href="about_us">About Us</a></li>
    <li><a href="mailto:info@realize-scotland.co.uk" title="Email Realize Scotland">Contact</a></li>
  </ul>
</div><!-- end #top_nav -->

<div id="content">
  <ul id="courses">
    <li><a href="corporate_training/anger_management">Anger Management</a></li>
    <li><a href="corporate_training/change_management">Change Management</a></li>
    <li><a href="corporate_training/confidence_building">Confidence Building</a></li>
    <li><a href="corporate_training/conflict_resolution">Conflict Resolution</a></li>
    <li><a href="corporate_training/leadership">Leadership</a></li>
    <li><a href="corporate_training/mentoring">Mentoring</a></li>
    <li><a href="corporate_training/motovational_interviewing">Motovational Interviewing</a></li>
    <li><a href="corporate_training/personal_development">Personal Development</a></li>
    <li><a href="corporate_training/presentation_and_negotiation">Presentation & Negotiation</a></li>
    <li><a href="corporate_training/support_and_supervision">Support & Supervision</a></li>
    <li><a href="corporate_training/team_building">Team Building</a></li>
  </ul>
  
  <div id="course_details">
    <p>A full range of Corporate Training courses are available covering your every need.</p>
  </div>
</div><!-- end #content -->

 

Just remember to add any elements containing floated elements to the list of elements in the float clearing css I provided.

 

I was experimenting with your site and if you used the source order above, and floated list items, you would need to use an extra line of css declarations for any elements below #side_nav in the source code that contain floated elements that need to be cleared. It would use {clear:right} instead of {clear:both}. This is what I ended up using:

 

/* FLOAT CLEARING
----------------------------------- */

/*for modern browsers*/
#content:after, #header:after, #extra_links:after, #side_nav ul:after {content: "."; display: block; height: 0;font-size: 0; line-height: 0; clear: both; visibility: hidden;}
#top_nav:after, ul#breadcrumbs:after, ul#sub_nav:after {content: "."; display: block; height: 0;font-size: 0; line-height: 0; clear: right; visibility: hidden;}

/*for IE7 only*/
*+html #content, *+html #header, *+html #extra_links, *+html #side_nav, *+html #top_nav, *+html ul#breadcrumbs, *+html ul#sub_nav {min-height: 1px;}

/*for IE6 only*/
* html #content, * html #header, * html #extra_links, * html #side_nav, * html #top_nav, * html ul#breadcrumbs, * html ul#sub_nav {height: 1%;}

[u01jmg3]

Hi bronzemonkey,

 

attempted to implement and modify your code slightly but got a few issues with how it looks:

 

(http://www.jonathangoode.co.uk/realize-scotland.co.uk/test.html)

(http://www.jonathangoode.co.uk/realize-scotland.co.uk/test.css)

 

1. I've tried modifying your float clearing css code but at the top right the date and extra_links are both floated to the right and side by side rather than underneath each other.

 

2. The html page looks different in FF2 and IE7: differences in spacing in the header and below courses.

 

3. Previously the logo used to be positioned at the top right hand corner but because you've shuffled my code slightly it isn't anymore as the header comes first but the logo is in the side_nav.

 

4. There is no longer a small amount of space above the the heading "Corporate Training... in the countryside." because your css float clearing code is working so well!

 

Thanks again.

 

P.S. this layout was by no means my choice, I'm helping out my neighbour and have taken over from the last guy she employed to do her site who was worse than me! --> http://www.realize-scotland.co.uk

 

P.P.S. my code is written in PHP with the side_nav and top_nav included as includes but obviously you can't view any of my PHP unless I send it to you so if you do want a look at it just ask but for now working on a test.html page and test.css file is fine to get it to look right.

[bronzemonkey]

Well you're going to have to fiddle with the css to replicate the appearance.

 

1. Use {clear:both;} on #extra_links or absolutely position the elements instead (remember to use {position:relative;} on the header to use it as the reference point for absolute positioning elements within the header).

 

2. That's because different browsers use different default padding/margins on various elements. Use some sort of "css reset" (google will bring up several) to get all browsers starting from the same point.

 

3. Use a declared #height (use ems if you want it to resize in proportion to text size) for the #header and then use a negative margin equal to that value for the #side_nav. It will pull the #side_nav up into the space provided by the header's left-margin.

 

4. Just add some top-padding to the header or h1.

[u01jmg3]

1.

#content:after --> with your css float clearing code (the 'for modern browsers' part) FF2 seems to set a height for the content div (not an issue with IE7); illustrated what I mean by having only one course listed (http://www.jonathangoode.co.uk/realize-scotland.co.uk/test.html). The height of the div does change though if you add enough courses to fill the space provided by the height FF2 seems to set.

 

2.

Question:

"4. There is no longer a small amount of space above the the heading "Corporate Training... in the countryside." because your css float clearing code is working so well!"

 

Answer:

"4. Just add some top-padding to the header or h1."

 

I didn't want to use top-padding incase they changed the font-size and the "Corporate Training... in the countryside." text disappeared. I tried to use {clear: right;} on h1 like I've now done for #extra_links but only FF2 not IE7 seems to take notice?

 

3.

Should I be using {clear:both/left/right;} in my css or should I be adding to your css float clearing code?

 

4.

I'm using Eric Meyer's CSS Reset code (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) to get all browsers starting from the same point and it seems to be doing Ok.

[bronzemonkey]

1. It shouldn't. You might have something in your css file that is causing that appearance.

 

2. In case who changes the font-size? Using padding on the h1 element isn't going to make type disappear if the text is resized. Remember to use em sizes if you want a dimension to scale relative to font-size.

 

3. The float clearing is to properly clear an element that contains floated elements. It is something quite different to using clear:both/left/right. To help you understand, here is a link to the article/tutorial that current float clearing methods are derived from: http://www.positioniseverything.net/easyclearing.html

 

4. I use a modified version of Meyer's reset too.

[dbrimlow]

bronzemonkey's solution for clearing floats is so much better than the "standard" way - by  adding a "clearfix" class to the floated element.

 

He designates the clearfix for the actual id container itself - much cleaner markup.

 

But I prefer using the "clearfix:" float clearing method to just clear the main container itself (which I float) and not any nested floats within a non-floated container.

 

But to your situation itself.

 

First, the reason the header doesn't align with the logo colors is because you forgot to add the IE conditional comment styles in your test version ... AND now that it is properly cleared, the #header tag needs a height and padding, as well, to position it with the logo.

 

Looking at your code, I would change the actual way it is constructed, but to fix it as is I recommend two things:

 

1. Don't clear #extra_links; remove them from the group of IDs that are "clearfixed".

 

2. make a separate "ieonly.css" file that modifies just a few positioning items in some elements and call it with a conditional comment in the head tag.

 

In your test.css I modified the following:

 

#header {
color: #ffffff;
background-color: #003300;
height:58px
}

#courses {
float: left;
margin-right: 15px;
}
#course_details {
border: 1px solid #003300;
padding:15px;
float:left
}

 

Then I made a file called ieonly.css to it fix the header alignment and modify a few things I changed from the main css as follows:

 

.content {
padding-top: 12px;
}
#header {
height:58px; 
margin:0; 
padding:12px 0 0 0;
}

#side_nav {
margin-right:-3px;
padding:0

}
#course_details {
float: right;
}

 

and added this to your head tag:

 

<!--[if IE]>
<link href="css/ie-only.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

This seemed to fix the issues you were having after the float clearing. It looked fine to me in Win 2000 Firefox and IE 6.0

 

HOWEVER! Yesterday I discovered that the best platform and browser to confirm cleared floats was Ubuntu Firefox. If you want to be a "purist" and make sure your floats cleared 100% as they should, then that's the platform and browser. (Floats that I had never cleared but looked fine in Win, FF/IE, Mac Safari  and SuSe Linus FF and Sea Monkey blew up in Ubuntu FF).

 

But most people are happy enough with Win FF/IE and Mac Safari since these 3 represent 99%

of most visitor platform/browser stats.

[u01jmg3]

@dbrimlow

Thanks for your help - have you seen my most recent test page?

I actually just rearranged the html so that the #side_nav was before the #header rather than after and then added 11px margin-top and that seemed to do the trick with lining things up in both FF2 and IE7.

Although I would like the site to look fine in every browser it just isn't possible plus I'd end up going crazy with all the debugging! Thanks for the tip on Ubuntu FF, will install the OS on Virtual PC 2007 and give it a go. Think I'll just stick with Win FF/IE and Mac Safari like you said but I won't forget the other 1% minority.

 

@bronzemonkey

1.

Ok will look into debugging my css - looks to me like in FF2 the #content div's height is being matched to the height of the #side_nav for some reason: illustrated by removing the bottom padding.

 

2.

I thought if you set a fixed height for the header then a user used their browser to change the font-size (in IE: View > Text Size > Largest) and their browser window was a small resolution then the title text would have to jump to a new line but because the font color in the header is white with a bg color of green but the rest of the page is font color green with bg color of white, the text would in affect be invisible as it jumped down because it would be a font color of white on a white bg? If a fixed height wasn't set then the green bg color would jump down with the title text not causing it to be invisible. Am I wrong?

 

In the end as I've said above to dbrimlow I shuffled my html around and then added 11px margin-top and now things line up fine with the logo and the header. I know you've said to use em sizes for things to scale but to precisely get things to line up I've used a pixel size, is that Ok?

 

3.

Thanks I now what's going on with the clearfix css code.

 

--------------------------------------------------------------------------

 

Just 2 problems remain!:

1. In IE7:

the text "Corporate Training... in the countryside." (floated to the left) should be on the bottom line inline with the #extra_links (floated to the right) and not inline with the date (also floated to the right). As I said I used a {clear:right} for h1 in my css which FF2 took note of but IE7 hasn't.

(Currently there is 11px margin-top applied to get the green background-color of the header to match up with the white half of the #side_navs logo, so the text "Corporate Training... in the countryside." might not look exactly inline with the date but it is.)

 

2. In FF2:

For some reason within the first box where the courses are listed (just the one course Anger Management) FF2 seems to be matching the height of the #content div with the #side_nav?

[dbrimlow]

the text "Corporate Training... in the countryside." (floated to the left) should be on the bottom line inline with the #extra_links (floated to the right) and not inline with the date (also floated to the right).

 

This is exactly why you need an ie-only css. Remember, IE does not handle floats, margins, paddings the same as modern browsers. It is the only way to be 100% sure of cross-browser compliance. It will save you hours of frustration.

 

For some reason within the first box where the courses are listed (just the one course Anger Management) FF2 seems to be matching the height of the #content div with the #side_nav?

 

Why do YOU think that is?

 

Look at two things - 1. what is the padding/margin for those 2 containers, 2. what is your padding/margin for any UL element?

 

It really is doing exactly what you are telling it to do. And whenever you leave any block level element to browser default, you will get an even more frustrating IE vs Modern Browser results.

[bronzemonkey]

If your div is clearing all the way down to the bottom of #side_nav it sounds like you have got that div listed in the float clearing declarations that include {clear:both}. Try adding it only to the one including {clear:right}.