Dreamweaver noob CSS/template/float/whitespace question
February 5, 2009 9:55 AM Subscribe
Dreamweaver CS3 newbie CSS/template/float/whitespace question
I have created a few pages in Dreamweaver CS3 based on the "Two column hybrid, left sidebar, header and footer" template. The pages render perfectly on my computer; I tested them at every available resolution -- no problems.
When the pages were viewed by someone who really matters, they rendered funky, naturally. I wasn't present when he viewed them but what was described to me is that the main content was pushed down below the sidebar, thereby creating a ton of whitespace to the right of the sidebar. I have tried to recreate the problem on my PC but have not been able to.
I'm new to Dreamweaver/HTML/CSS, but from what I've read this sounds like a "float" issue, no? Am I barking up the right tree? I need to fix this ASAP, so any suggestions or expertise that is shared is greatly appreciated. Also, how can I make sure the issue is truly fixed when I cannot recreate the problem? Thanks in advance!
I have created a few pages in Dreamweaver CS3 based on the "Two column hybrid, left sidebar, header and footer" template. The pages render perfectly on my computer; I tested them at every available resolution -- no problems.
When the pages were viewed by someone who really matters, they rendered funky, naturally. I wasn't present when he viewed them but what was described to me is that the main content was pushed down below the sidebar, thereby creating a ton of whitespace to the right of the sidebar. I have tried to recreate the problem on my PC but have not been able to.
I'm new to Dreamweaver/HTML/CSS, but from what I've read this sounds like a "float" issue, no? Am I barking up the right tree? I need to fix this ASAP, so any suggestions or expertise that is shared is greatly appreciated. Also, how can I make sure the issue is truly fixed when I cannot recreate the problem? Thanks in advance!
Response by poster: Thanks, dydecker. I did ask which browser was used and at what monitor resolution but it was met with an "I don't have time for this because I'm a very busy person" type of response. I'm reading up on floats and will Google the IE Tester you mention. Thanks for your response!
posted by momzilla at 10:10 AM on February 5, 2009
posted by momzilla at 10:10 AM on February 5, 2009
No problem. If you're on Windows, I recommend installing IE Tester so you can check your site in IE5.5, IE6, and IE7 - IE6 in particular is notorious for rendering pages quite differently than other browsers. It can be quite disheartening to finish your page and then check it in IE and everything is in the wrong place. IE6 does all sorts of strange things like adds extra margins to floats, etc.
Best practice is to check your site in these browsers too, even though it is painful, because many people use them.
posted by dydecker at 10:19 AM on February 5, 2009
Best practice is to check your site in these browsers too, even though it is painful, because many people use them.
posted by dydecker at 10:19 AM on February 5, 2009
Best answer: When I'm developing (which I do for fun, not for money, FWIW) I build in Firefox, then check it in Safari and Opera. Once it looks good, and I'm certain that it plays nice with these three browsers, I pen IE and figure out what needs to be fixed.
You can use the Internet Explorer conditional statement in the
Further, you can specifically target different IE versions by using "gt" (greater than), "lt" (less than), "gte" (greater than or equal to), "lte" (less than or equal to) and version number. For example a link inside the comment
I like doing this because it makes it easy to code for good browsers, it's valid code, doesn't use any messy hacks to make it work in IE, and honestly I wish that other browser makers would include such a simple method of hiding code. It's one of the few things Microsoft did right with IE. If something isn't supported, I can provide a workaround without messing up other browsers.
posted by caution live frogs at 11:29 AM on February 5, 2009 [2 favorites]
You can use the Internet Explorer conditional statement in the
<head> section to import a CSS stylesheet containing fixes for IE as follows:<!--[if IE]>
<style type="text/css" media="screen">@import "IE-CSS-rules.css";</style>
<![endif]-->Further, you can specifically target different IE versions by using "gt" (greater than), "lt" (less than), "gte" (greater than or equal to), "lte" (less than or equal to) and version number. For example a link inside the comment
[if gte IE 6] will apply to IE 6, 7 and 8 but not 5.5.I like doing this because it makes it easy to code for good browsers, it's valid code, doesn't use any messy hacks to make it work in IE, and honestly I wish that other browser makers would include such a simple method of hiding code. It's one of the few things Microsoft did right with IE. If something isn't supported, I can provide a workaround without messing up other browsers.
posted by caution live frogs at 11:29 AM on February 5, 2009 [2 favorites]
Also, multipleIEs allows you to install full versions of other IE browsers for testing. Probably not as simple as IE Tester, but useful if you want to use versions not included in IE Tester yet.
posted by caution live frogs at 11:30 AM on February 5, 2009
posted by caution live frogs at 11:30 AM on February 5, 2009
Best answer: Definitely sounds like a float issue, probably IE6, complete nightmare... the decision makers always seem to use that browser...
Anyway look up the "3px float bug" in google
hopefully this will help with bug fixing as well
Also, install multipleIE, so you've got IE7,6,5.5,4 and even 3 for testing with. I literally couldn't live without it, unless you've got a separate PC for each browser you want to test with!
posted by derbs at 5:09 PM on February 5, 2009
Anyway look up the "3px float bug" in google
hopefully this will help with bug fixing as well
Also, install multipleIE, so you've got IE7,6,5.5,4 and even 3 for testing with. I literally couldn't live without it, unless you've got a separate PC for each browser you want to test with!
posted by derbs at 5:09 PM on February 5, 2009
Response by poster: Wow, thank you all for your help. Your suspicions are correct ... I have learned that they were using IE6! I have installed multipleIE as suggested and am going through the Lynda.com tutorials on CSS and will also consult my "Missing Manual" if I still don't get it. Thanks again for taking the time to help me out!
posted by momzilla at 6:46 PM on February 5, 2009
posted by momzilla at 6:46 PM on February 5, 2009
« Older How to Propose (gay male edition) | what's good about private insurance instead of NHS... Newer »
This thread is closed to new comments.
BTW you don't mention which browser your friend is using, which is the essential information you need to fix this. If you could find this out, you can recreate the error by installing that particular browser or using something like IE Tester (on Windows) if it is IE6.
Once you see the bug, you can fix it.
posted by dydecker at 10:01 AM on February 5, 2009