close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Help with fine tuning a layout

Thread began 1/25/2010 11:24 am by iainmacdonald331081 | Last modified 1/25/2010 5:14 pm by iainmacdonald331081 | 1281 views | 8 replies |

iainmacdonald331081

Help with fine tuning a layout

Hope someone can help me crack this - I've basically just about got a layout as I'm trying to get it, but its got a couple of pixels out with a couple of things.

The page is here :

homepagenearly.php

And the main CSS file is here :

home_styles_nearly.css

My two issues are :

1. The main image between the red and green sections is displaying as 1px too short in IE6. (I've only got access to IE6 at the moment, so if anyone could quickly check that in 7 and/or 8, that would be great.)

Its OK in Safari, and Firefox (PC and Mac)

2. The real tough nut I've been trying to crack for hours, is to create a 1 px border between the red section and green sections and the main image. (To match the 1 px border immediately at the bottom of the red and green panels.)

I've been playing around with every combination of my <div> widths and margins, and after getting close, then breaking one or other browser, this is as close as I've managed to get it, and in the most browsers.

Hopefully it will be pretty obvious to a fresh pair of eyes though.

Many thanks.

Sign in to reply to this post

neilo

Hi Iain,

Haven't looked at the css yet, but attach screen shots of page in IE7 and IE8 as tested in browsers.

A good resource for you in situations like this is to use Adobe's 'Browser Labs' where you can find out how your pages appear in most platform/browser combinations.

Sign in to reply to this post

iainmacdonald331081

Thanks for that - I just changed my IE CSS to be IE 6 specific - so that seems to have cleared up the IE7 and 8 glitches.

And thanks for the Browser Labs thing - can't believe I haven't stumbled across that before!

Only the IE tester thing, but that's windows only, and pretty flakey.

If you could spot the tweaks to bring narrow the gap between the image and the red and green panels to 1px, by hook or by crook, that would be much appreciated.

I've been tearing my hair out for hours - thought it should just be a case of tweaking the margins, but every which way I went it broke.

Sign in to reply to this post

neilo

You could try this - setting the contenttop div and image widths in home_styles_nearly.css

change the rules in contenttop div to:

#outerWrapper #contentWrapper #contenttop {
height:218px;
margin:auto;
padding:0px 0px 0px 0px;
background-color: #666666;
text-align:center;
width:472px;
}



(You don't need to change the margins from px values to auto, but it makes it a lot easier to adjust the div width and you won't always have to adjust the margins at the same time!)

Then select the image and give that a width of 472px also.

I'm not sure how this plays out in IE, you may have to tweak the ie css too.

Sign in to reply to this post

iainmacdonald331081

Thanks Neilo - that's it looking great now in everything apart from IE6.

The latest version is here :

homepage202.php

And the main CSS is here :

home_styles202.css

If you have any idea what tweak might tidy it up in IE6 that would be much appreciated.

Sign in to reply to this post

Jimmy Wu

The general cause for this kind of layout issue is that the width of the contents is too wide for the container that it is in. Try reducing the width on the image and contents of the middle column and seeing if that helps resolve the issue.

Sign in to reply to this post

iainmacdonald331081

Thanks Jimmy - I was playing around with it for ages.

At the end of the day, the image will be the same size which ever browser, so should I be able to fix it by playing around with the left and right columns rather than the middle column?

I have managed to get the pic up where it should be though - spotted that IE 6 was adding a padding outside the div, rather than in it.

Sign in to reply to this post

neilo

Hi Iain,

That's a good looking site you have there. Will have a look at the IE6 conditionals a little later, and if I spot anything I'll post back.

I wouldn't make any general adjustments to the image or middle column just yet though.

Sign in to reply to this post

iainmacdonald331081

Its actually very close now - pretty much as it was originally, but exactly as I wanted it in everything apart from IE6.

And I should probably say that I can't take credit for the design - I've just been approached to maintain the site, and maybe give it a refresh at some point. The original was in asp.net, which I'm not familiar with, so have been trying to recreate it in HTML / CSS.

I have tried to tidy a few things up thought - the right hand panel was all screwed in IE6 in the original too.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...