column not lining up

[oggyswain]

I am frustrated. Here is the site address

 

www.postmarkinternational.com

 

Take a look at the column lines they do not line up. I have tried everything.

 

Can anyone help?

[falkencreative]

The first step would be to remove a couple CSS styles from #Map_Copy:

 

remove:

left: 418px;

top :339px;

position: absolute;

 

and you'll need to adjust the margin on this line:

 

 

After glancing through the HTML, it seems like you have a huge amount of unnecessary

s and s littering your file. The spans look like they are generated by using the WYSIWYG features of Dreamweaver, rather than hand coding. I'm not sure what all of the extra divs are from.

 

For example, this:

 

></pre>
<table cellspacing="0" cellpadding="0" id="Centre_Background" class="bot-k">






Experts in 

                             US Inbound 

                             and Outbound 

                             Freight and Clearance










Call us for a Quote

905-470-0001








</t

 

Could easily be this (with some significant changes to the CSS, of course):

 

 



Experts in 

   US Inbound 

   and Outbound 

   Freight and Clearance





Call us for a Quote
905-470-0001



 

[oggyswain]

So your telling me that I can't use Dreamweaver to create and fix websites? Is there a way of getting rid of these unneeded divs without having to change everything?

[falkencreative]

I'm just saying that Dreamweaver doesn't create perfect websites. When you use its WYSIWYG features (basically, creating the site in the Design view, rather than coding it in the code view) it often creates unnecessary divs and span tags. This is a common problem with basically all WYSIWYG tools. If you actually understand the code, and can hand code the site, you can bypass this issue.

 

"Is there a way of getting rid of these unneeded divs without having to change everything?"

No, not really. Realistically, probably these extra tags won't be a problem with the page displays, but realize that a lot of the code in the page is probably unnecessary, and may cause challenges if someone else tries to go in and make changes.

[oggyswain]

OK Thanks.

 

Can you explain what the problem was. If you look on other pages as well it happens on a lot of them.

[oggyswain]

the shipping page is much worse.

[falkencreative]

For me (Firefox 3.5, Mac) the second column on the shipping page doesn't seem to fully enclose all the elements in it. Looks like it is caused by setting the height in your CSS file:

 

table, td {

border:0 none;

height:250px;

width:100%;

}

 

Remove the height, and you partially fix the issue (though you'll need to make some other adjustments now).

[oggyswain]

Hi Benjamin,

 

I tried what you mentioned. I took out the height and it got worse.

 

I have a design background but this web stuff frustrates the crap out of me.

 

So is there no way of putting in a figure that you want the length of the box to be and it being that length?

 

I have tried 250 & 0 and it still does not work. Very frustrated.

 

The worst part is that when I preview them, they look perfect.

Edited September 9, 2009 by oggyswain

[virtual]

Never ever believe Dreamweaver's design view. I have heard it is much better in CS4, but there is nothing like testing directly in different browsers.

 

Try reading this article regarding column lengths

http://css-dis cuss.incu tio.com/?page=AnyColumnLongest

[oggyswain]

OK I believe I am getting there. I think the problem I am having all has to do with CSS set to effect all pages. How can I get the CSS to effect the columns separately.

 

If you look at the page now http://www.postmarkinternational.com/Shipping.html

 

It looks much better but the changes I have made have effected the rest of the pages as well. How do I make CSS apply seperate column heights to separate pages?

[oggyswain]

Got it to work. Looks great!

 

Thanks for everyones help!