Dreamweaver MX > CSS and IE / Firefox problem

  joelmb 00:16 28 Feb 06
Locked

Hi guys. I haven't posted here for ages so apologies if this has been asked; I have a problem. I'm new to CSS postioning and have been struggling to get a grip on it. I know its the correct path for accessibility and want to design pages without the use of tables.

My problem is, just as I'm starting to celebrate how easy it all is to do in Dreamweaver, creating an external stylesheet using DW's embedded CSS style windows, it all looks great in DW, I preview and it looks great in Internt Explorer, however when I preview if Firefox the div> "blocks" ive created in the stylesheets aren't postioned correctly. Theyre like 10 pixels higher in Firefox than in IE.

I don't know if I'm explaining this too well, just hoping I might save some time if anyone knows where I'm going wrong and why there's this positioning difference?

This is an example of the css created to control the left column on my page:

.leftcolumn {
position: absolute;
left: 20px;
top: 152px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0099CC;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
padding-left: 10px;
width: 245px;
padding-right: 10px;

}

Please help!

  DrScott 03:28 28 Feb 06

The main difference I noticed with IE and other brwsers is the use of the <P> tag. I'm an Opera user and it renders paragraphs differently adding extra line above where the text should start.

So if you're writing text in your DIVs, then check and see if the <P> is the culprit.

Otherwise, I'll have to sleep on it :-)

  joelmb 12:35 28 Feb 06

Thanks for suggestion, I did indeed have P tags but didn't resolve when I removed them. Also took out <br> tags I'd added but it's still there. I notice where I've defined the width of the div in the positioning of the css it's wider in FF too, and the text spacing is different. Its blimming annoying! Any other ideas?!

  slightlymad 13:41 28 Feb 06

I've just replicated your coding in DW, and the positioning looks fine to me - it's the same in both browsers.

What else is going on in your stylesheet (I'm thinking margins and padding) - can you post a link?

This may be over my head as I'm fairly new to CSS myself, but I'm sure one of the gurus will be along soon. A link will help.

Marie

  joelmb 19:25 28 Feb 06

Here's an example of the problem in practice.

click here

If you view these two pages in both IE and FF the 'leftcolumn' jumps about. I think I understand partially why its doing it so much vertically; When "top" is specified positionally it isnt the same place on every browser because it depends on the amount of toolbars etc.

However what seems to be happening is that the text in FF is forcing the width of the box out?

Any ideas? I'm probably creating this in the totally wrong way. what i'm trying to achieve is images and text sitting in a column about this width but I don't want it pressing up against the left hand side of the column against the border.

The stylesheet is here:

click here

  DrScott 23:07 28 Feb 06

I'm at work and they won't let me install another browser, but just looking at your stylesheet it may be because you've specified vertical-align that you're getting your problems. Delete this and see what happens.

I'll have a proper look tomorrow at home, but I had many a headache caused by browsers interpreting my CSS layers differently!

  joelmb 13:33 02 Mar 06

No unfortunately that didn't help.....

  joelmb 02:37 18 Mar 06

(or at least, I know where the problem lies!) Thought I'd post it in case anyone searches with same problem and finds this....

It was the padding I was using that FF was seeing differently to IE (mentioned by slightlymad :) ).

This thread mentions and describes it:
click here

and it links to this rather good explanation of 'The box problem':
click here

This thread is now locked and can not be replied to.

Surface Pro (2017) vs Surface Pro 4

20 groundbreaking 3D animation techniques

How to mine Bitcoin on Mac