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?

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.

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.

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.

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!

No problem, glad I could help you this time.

Hey, yep I think I probably use Firebug more than the Web Developer extension. Extremely useful at pointing you to any code the browser is having difficultly understanding i.e. a mistake in your coding. Highly recommend it as well as the Web developer extension: https://addons.mozilla.org/en-US/firefox/addon/1843

@ bronzemonkey: Thanks very much for your input. I will revert to a doctype of HTML 4.01 Strict as suggested and with regards to the javascript issue I definitely value your opinion as a viewing user so I will be changing the code to cater for javascript being disabled. I haven't yet finished coding so I haven't actually got onto testing with different things being disabled etc but thanks for pointing out the issues you have come across. Already ahead of you on that one - got that extension plus Firebug which I also find very useful! Cheers.

@ bronzemonkey: 1. When are you supposed to use XHTML as your doctype? 2. And javascript isn't just there do fancy gradual opacity shifting over images, there are other bits and pieces of scripts that help to enhance the viewing of the site if javascript was enabled - is it still too much to let users know that their viewing of the site could be improved if javascript was turned on? Thanks for all your replies bronzemonkey and dbrimlow!

Hi guys, sorry for the late reply but I was expecting to be notified by email of your replies but I've fixed that now. -------------------------------- Here is the link to the page in question: http://www.jonathangoode.co.uk/realize-scotland.co.uk/ -------------------------------- Viewing in either IE or FF will show what I mean by one understanding but as they say if IE gets it right and FF doesn't then something must be wrong. Ok I now intend to use a border on one side of a div to emulate a line in my page - thanks. -------------------------------- @bronzemonkey how is the page being served as text/html? The rest of the site has a doctype of xhtml 1.1 - is this correct to do so?

Hi, second post of the day but I'm stuck. Basically I have a div with a border, some text and a background image. Now, I was trying to be slightly creative and thought I'd make the background image 50% opaque so that if text spills onto it, the text could still be read easily. I know I'd probably be just as quick saving the image with 50% opacity in Photoshop but I was hoping I could get this to work with CSS. I found this site: http://www.mandarindesign.com/opacity.html which told me to add this code to my CSS: opacity: .50; filter: alpha(opacity=50); -moz-opacity: 0.5; Now when I do this it works but works too well and makes the whole div 50% opaque (border, text and background image) which is kind of obvious from what I was doing so what I want to know is how can I make only the background image opaque without affecting the rest of the div including borders and text. I have tried putting the text in a child div and setting the opacity of it to 100% but this is ignored and I was hoping I could have the parent div as the div with the background image so I don't want to mess around with positioning and having separate divs for text and background image. Thanks!!

Hi, basically I have 2 horizontal rules on my web page. One of them is aligned to the left and the other is aligned to the right to give my page some style - now this is easy enough to do and it works fine in IE7 and FF2: <hr align="left" /> <hr align="right" /> Now I validate my code against XHTML 1.1 and it complains so I change my code to this: <hr style="text-align: left;" /> <hr style="text-align: right;" /> Now it no longer works in FF2 but still works in IE7 so something must be wrong - instead it is aligning to the center which is what the body is set to do. How can I fix this so it's both compliant and works in IE7/FF2? Thanks!!

Thanks very much for your help. Worked like a charm!

Thanks very much for your reply michaellunsford. This is what's now in my .htaccess file but can it be shrunk further??? RewriteEngine on #---------------------------------------------- #Home - Corporate Training - Site 1 #---------------------------------------------- RewriteRule ^home-corporate_training/?$ 11_home.php #---------------------------------------------- #About Us #---------------------------------------------- RewriteRule ^about_us/?$ 12_about_us.php RewriteRule ^about_us/([a-zA-Z0-9_]+)/?$ 12_about_us.php?skill=$1 [L,NS] #---------------------------------------------- #Corporate Training #---------------------------------------------- RewriteRule ^corporate_training/?$ 14_corporate_training.php RewriteRule ^corporate_training/([a-zA-Z0-9_]+)/?$ 14_corporate_training.php?course=$1 [L,NS] #----------------------------------------------

Hi, just wondered if anyone could help me out with this small .htaccess problem and using mod_rewrite? Basically I already have a working .htaccess file but I wondered if there was a way of writing a generic rule for what I have rather than writing a rule for every page of my site in my .htaccess. Here's what I mean... ---------------------------------------------------- (1.) Here's the current rule for a page on my site: RewriteRule ^corporate_training$ 14_corporate_training.php (2.) And here's the current rule for a particular section of a page: RewriteRule ^corporate_training/anger_management$ 14_corporate_training.php?course=anger_management Could this be made generic with one single rule for each? ---------------------------------------------------- Also if someone uses a trailing slash for any page of my site such as: http://www.realize-scotland.co.uk/corporate.htm/ it gives an error - is there anyway of properly interpreting this in the same way: http://www.realize-scotland.co.uk/corporate.htm is properly understood? ---------------------------------------------------- Thanks. Jonathan.