2 new problems …

@DanUKJun 13.2004

[FONT=Courier New]Hello.

I have attached my CSS layout which contains the HTML and CSS.

I’ve been playing around with it and cannot get it to work properly.

The errors I’m encountering, and these are the only two *yay*:

1. In Internet Explorer 4.01, Internet Explorer 5.01 there is a gap beneath “title1” div and the start of content which shouldn’t be there. On all other browsers this seems ok.

2. In Internet Explorer 4.01, 5.01 and 5.5 there’s an error where when a table (such as the one I included in the HTML) is in the content DIV the content div is pushed out and into the right blocks, and pushes their content over and overlaps the rightblocks…looks horrible!

EDIT: Forgot to mention, in IE 4.01 the right blocks don’t show at all, and aren’t aligned where they should be… not that’s a major cocnern though, I’m not too worried about IE 4.01.

If you have any comments about the way I’ve done this, or the CSS I’ve used (I’ve purposely removed all backgrounds etc)… please let me know.

Many thanks in advance. Hope you can help.

Regards,[/FONT]

to post a comment

CSS

25 Comments(s) _↴

@DanUKauthorJun 14.2004 — #Any ideas on this please guys?

Thanks in advance.

Regards,

@davidbrentJun 14.2004 — #Well i cannot see the problems that you need solving. Maybe you should clear your Cache (CTRL+F5).

With the table issue. You do not need to use the table. That layout could be done similary with CSS. I am creating a demo of this at the moment to show how even complex designs can be achieved with CSS. (CSS ZenGarden is a good representation of this).

Use the float: left; attribute for those boxes. I may be barking up the wrong tree here so tell me if i am wrong.

Could you also be more descriptive and maybe include a screenshot or image edited to show us exactly what your problem is.

Best Wishes,

David

@DanUKauthorJun 14.2004 — #Hello there.

Yes, I realise that about the tables, but there's certain pages where the content is generated that is in tables..and this problem only occurs with them.

I will attach a screenshot in a second.

Thanks again.

@DanUKauthorJun 14.2004 — #Ok here we go.

There's screenshots of the page in:

Opera 7.23 (this screenshot failed...which is quite common on that screenshot site)...

Mozilla Fire Fox .8 - Absolutely fine.

Internet Explorer 4.01 - *very* wrong.

Internet Explorer 5.01 - the table pushes into the right blocks.

Internet Explorer 5.5 - ""

Internet Explorer 6.0 - OK.

Link: http://danvine.com/iecapture/detail/noflash/1087491409/www.danfar.co.uk/b.html

As you can see, it's IE 4.01, 5.01 and 5.5 that have problems with the layout. Hopefully you'll see exactly what I meant with the space beneath the "title1" div, and the table stretching it into the rightblocks...

Regards,

@DaveSWJun 14.2004 — #Personally I'd use @import as that should hide your code from ie4.

Also the site says version 5 is temporaily disabled...

edit: I'm not sure whether ie4 supports @import. It's not supposed to but I've had some code that actually gets through the @import to ie4.

@DanUKauthorJun 14.2004 — #Hiya,

on my main site i'm using the @import method, as this hides it for Netscape 4 (or whatever that troubled version is).

Apparantly, all versions of IE support it.

Is this just an IE problem, and not something I've done in my CSS?

Thanks.

@DaveSWJun 14.2004 — #I couldn't say without examining your code more closely, but I've got three exams tomorrow so it'll have to wait till after them if you see what I mean...

I'm officially in the last stages of panic revision before tomorrow. ?

@DanUKauthorJun 14.2004 — #Eek ok, good luck. ?

If anyone else can spot anything, please let me know. I'm completely baffled.

Those screenshots reside on that server for only 24hrs .. so i'll post it again if nothing happens before that time.

Thanks.

Regards,

@DanUKauthorJun 14.2004 — #Still not getting *anywhere* with this.

I've been over, and over the CSS, and found little things that could've been better (background-colors etc) which aren't in the attachment I attached to this thread.

However, I can see nothing that would cause those results... so any help is much much appreciated... thanks in advance.

Regards,

@DaveSWJun 15.2004 — #Ditch the width:99%; in table.maintable to fix it for ie5.x

I'm still working on 4.0

@TeachJun 16.2004 — #Cheers Dave for that.

What should I use, as I wanted it to ideally fit the width of the "content" div?

Would that also fix the problem with the space underneath the title1?

Thanks again for your help.

Regards,

@DaveSWJun 16.2004 — #[i]Originally posted by Teach [/i]

[B]What should I use, as I wanted it to ideally fit the width of the "content" div?[/B][/QUOTE]

It expanded to fill the gap anyway in every browser I tested (ie5.0/5.5/firefox 0.8)

Do you have one it doesn't expand in?

@DanUKauthorJun 16.2004 — #[i]Originally posted by DaveSW [/i]

[B]It expanded to fill the gap anyway in every browser I tested (ie5.0/5.5/firefox 0.8)

Do you have one it doesn't expand in? [/B][/QUOTE]

Hi Dave.

how did the exam go? ?

Most should indeed fill it, but a lot of our users (I used a survey PHP tool a while ago) use a lot higher resolutions than 1024x768, and in those, the tables don't sretch the width of the content div without width in css. That was my reasoning for doing it...

So .. the questions and problems we still have with this:

1. If the width: of the table is causing problems..how can I make it "fill" the 'content' div?

2. The spacing beneath the titel1 div in IE 4.01, 5.01 I have no idea why it's occuring..

3. and in IE 4.01 the right blocks are completely aligned wrong.

You'll see how I mean, i.e. the Firefox or IE6 & Opera shots are correct, compared to the three problematic ones - IE 4.01, 5.01 and 5.5. That link with the screenshots should still be ok.

Thanks again for all your assistance.

Regards,

EDIT just tested it on XHTML strict with <?xml at the top of the page...and even in IE6 the table pushes to the right. Definitely need to get rid of the widths. :eek:.

Second EDIT: Removing the <?xml ..?> fixed it. Just those other problems... silly IE. ?

@DanUKauthorJun 16.2004 — #Any more ideas on this please guys?

I really cannot figure this one out ...

Thanks again.

Regards,

@Aronya1Jun 16.2004 — #Your code is all run together when I download the .txt file, so I can't make much sense of it easily (not that I'm a CSS guru), but the issue seems to be much the same as what Pyro's article on AListApart is about: [URL=http://www.alistapart.com/articles/negativemargins/]http://www.alistapart.com/articles/negativemargins/[/URL]. Maybe that will help.

@DanUKauthorJun 16.2004 — #[FONT=courier new]Hello,

Thanks for your response there.

Yes, during my research I also came across that article and tried the things it mentioned, but to no avail.

The problems only occur when there is a table within the content div in IE 4.01, 5.01 and 5.5. In IE 4.01 and 5.01 there's an added error that there's a big gap underneath the "title1" div, and lastly, in IE4.01 the right blocks are completely wrong. You will see by the screenshots what I'm referring to.

I'm not sure why the .txt was like that?

Seems ok when I download, as I just saved it from a normal text editor. Sorry if it inconvenienced you in anyway.

Thanks again for your help, and look forward to any assistance anyone can provide relating to this. It's doing my head in!

Regards,[/FONT]

@Aronya1Jun 17.2004 — #I'll try again later when I get home & can use my own computers. Here, Notepad is running everything together & Word just displays the file like a browser would. Then, if I try to see the HTML code, it throws in all the Word coding garbage, making things worse.

Like I said, I'll take a look later, but don't hold your breath counting on [b]my[/b] expertise. That's a bit of an oxymoron: my expertise.:p

@Aronya1Jun 17.2004 — #It's no wonder your head hurts! You've got so much going on, I can't keep everything straight, so I started over.

Here's how I see your page, conceptually.

One large container div.

Title div

Large white space

Two container divs side by side

In left container:

Welcome div

Text div

Content div w/table

In right container:

3 sets of two divs

Small white space

Bottom notice div

I'm attaching a conceptual markup file that represents what I described above. It has a few mock style attributes - change as you see fit. I get the feeling from your code that you are over-styling things, and I think you may be able to to more with less.

For example, if you have 3 divs stacked on top of each other, and you want horizontal lines seperating them (2 lines), you only have to add top and bottom borders to the middle div. If you want horizontal lines at top & bottom, too (4 lines), you only have to add top & bottom borders to the 1st & 3rd divs, but none on the middle div.

Here's the legal disclaimer:

Nothing is supposed to work "as is". It's a layout idea. I don't even know if it works, but maybe it can help to clarify something for you. Throw it out if you want.

[upl-file uuid=289fbebe-0eed-45d0-8173-b0bb271e2c5b size=697B]b2.txt[/upl-file]

@DanUKauthorJun 17.2004 — #Hello there.

Thank you very much for that.

As far as I can remember, there's only 20 DIV's for layout - which compared to some is actually pretty simple, do I don't think it's overly busy at all. Lycos.co.uk for example has like 120.

As for the structure, that's pretty right yes, but I don't think it's an actual problem with the CSS, on all newer browsers, Opera 6.12+, IE6, FF, Mozilla, Netscape 7 it's absolutely fine, it's literally just those problems with the content div having a table in IE 4.01, 5.01 adn 5.5, and in 4.01 and 5.01 a space between the title1 div, and 4.01 not showing the right blocks again.

I'm not sure if that link is still working to the screenshots, it clearly shows what I mean. After I post this I'll double check the screenshots are still available.

It's probably some hack that's needed for IE, as it's CSS support is debateable.

Thank you again for your help.

Regards,

@DanUKauthorJun 17.2004 — #The screenshots are only valid for 24hrs, so the previous ones have now timed out (will update the previous post too), the screenshots are now at: http://danvine.com/iecapture/detail/noflash/1087491409/www.danfar.co.uk/b.html

Thanks again for any help.

Regards,

@davidbrentJun 18.2004 — #I don't particulary like the red lines. But maybe with background styling they might look good.

Best Wishes,

David

@DanUKauthorJun 18.2004 — #David, on the actual design they're not read. As I mentioned earlier on the post, I've purposely removed all styling, I used red so that on the screenshots it'll show clearly the problems with the layout.

Any ideas why the problems are occurring?

Regards,

@DanUKauthorJun 18.2004 — #Hello guys.

Sorry to sound impatient with this, as I'm really not.

Does anyone have any idea why this is occurring, or what I've done wrong to make these things occur?

If so, please please let me know, as this is driving me mad! ?

Or, should I take the lack of response as that it's an IE bug, and actually not anything I have specificall done "wrong"?

Thanks again guys for any assistance you can provide, I really do appreciate it.

Regards,

@DaveSWJun 19.2004 — #IE4 doesn't have good support for floats, if that helps.

IE4 layouts would be all absolutely positioned.

Maybe some server side browser detection and serve up a different style sheet?

@DanUKauthorJun 19.2004 — #Okay, thanks. ?

Also in #CSS _↴

From a big PSD - to HTML (bootstrap)Multiple Stylesheets vs 1 style sheet vertilcal align in div

Success!

Help @DanUK spread the word by sharing this article on Twitter...

Tweet This

2 new problems …

25 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

2 new problems …

25 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #CSS _↴