CSS Float Troubles

JavaScript and client side scripting.

Moderator: General Moderators

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I'm not bothered about valid code. I know it won't be far off, although I know for certain it will fail because I've used XHTML stuff and it's defined as a HTML4.x document.
Well ok, it's your choice. Any reason why you can't choose a strict doctype then? Or an xhtml doctype? The thing is that some validation errors can cause layout trouble. So as long as they aren't solved you're never sure if it's the error, something wrong in your css or some browser quirk.
Correct me if I'm wrong, but the left attribute specifies the left margin?
For left margin you must use margin-left:20px;
When using positioning, absolute or relative, then you can use left:; or right:;
So:

Code: Select all

#element {
position:absolute;
top:20px;
left:20px;
}
The problem with margin-left on .navleft is that it's also floated left. IE don't like (search for double-margin bug IE).
Solution: also give it a display:inline; rule. But in your case you can just ditch the left:20px; It doesn't do much.
I know the layout is basic, but that's beside the point. I just wish CSS would work without so many fiddles. It's like every single thing I do with CSS is trial and error.
I can imagine it feels like that sometimes. Thank Bill Gates for that. But seriously, CSS isn't easy. But it is possible. You'll just have to be familiar with the most common quirks of IE and the basics of css. Took me quite some time to learn. And I still come across new bugs (in IE) once in a while.

I'll see what I can do. The problem seems to be that within the content box, the showrecordform is floated to the right, while just below/besides it the table tries to squeeze in. Each time you refresh the page or click on the menu, IE recalculates the spaces of the boxes in the page, and somehow something goes wrong there.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Post acknowledged :)
Image
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ok, it is indeed the fight for space between the right-floated <div class="showrecordform"> and the first table in the main section. IE is quite buggy in calculating sizes and sometimes conflicts arise due to some invisible boxes in IE's mind. Certainly when floated boxes are near non-floated boxes.

A solution can be to give the first table a margin-top of about 40px or so. Enough to give showrecordform a bit of room.

Or wrap all the main content in one div and give that div a margin-top.

Or use absolute positioning for showrecordform. The trick is to give the div in which it is a position relative. But you already did that (.content).

Code: Select all

.showrecordform {
	position:absolute;top:30px;right:40px;
}
Only problem with this is that by positioning the showrecordform absolutely, it will overlap the other content if you decrease the window width enough.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

DONE IT!!

I've already tried similar to giving a top margin to the first table, I applied clear: right to the first table. It made it all work as intended but left a nasty gap at the top like margin-top would do.

Didn't try wrapping all the main content in one div.

Tried absolute positioning but IE and FF put the box in a different place, so I could never get it right in both.

You're margin-top idea gave me a different idea though. So I applied clear: right and margin-top: -30px to the first table and that was that.

I should've thought of that when I first tried clear: right though.

Thanks alot :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Don't want to ruin the party but I can still see the same problem of the showrecordform jumping a bit in IE when refreshing. But it doesn't happen often, maybe 1 in 10 times.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Lol. Well spotted. Oh well. It's the best it's ever been so I'll leave it.

If he mentions it I'll quote £100 for fixing it :D
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

If he mentions it I'll quote £100 for fixing it :D
Hehe, or just tell him he probably has spyware on his pc. That's something every helpdesk tries to tell me each time I have a problem (for example with buggy internet connections and my ISP).
sansoo
Forum Commoner
Posts: 32
Joined: Mon Aug 14, 2006 5:33 pm
Location: Smallville

Post by sansoo »

This may have been mentioned earlier i dont know. But why is the table, the header, and the showrecords box all in the same div?

With the width of that table being what it is couldnt you pu it in a narrow div with a fixed width and float it left?
While the "showrecords box is in a div that floats right?

I would up two more divs inside the content div.

One for the Table and sets its width to like 640px and float it left. Set another div for the Showrecords box and float it right.

The only thing then inside the Content div is the header and the links in the bottom right corner.

And on a side note Why did you choose to use a bunch of <p> tags for you leftnav instead of an <ul>/<li> setup?

And did you set them up as an SSI or just in each page?

One other thing ive seen some people doing instead of linking to the stylesheets is using a @import url().
Supposedly it hides some of the stylesheet info from IE so it cant dick things up.
I dont know though. I use it for things like SSI's but not much else.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I can't answer for jayshields, but as it is now, the layout is fluid. Making the main content div 640px would increase the total width to around 1000px, fixed width. Maybe a bit to much.
One other thing ive seen some people doing instead of linking to the stylesheets is using a @import url().
By using the @import rule to include the stylesheet older browsers like Netscape 4 do not include the stylesheet. IE 5/6 include the stylesheet fine. However, when using the @import rule to include the stylesheet, IE suffers from the so-called "flash of unstyled content". So I would always use the normal include, and then - if necessary - from that stylesheet import more stylesheets with @import.

I'm not sure I understand what you want to say though. How do you use the @import rule?
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

sansoo wrote:This may have been mentioned earlier i dont know. But why is the table, the header, and the showrecords box all in the same div?

With the width of that table being what it is couldnt you pu it in a narrow div with a fixed width and float it left?
While the "showrecords box is in a div that floats right?

I would up two more divs inside the content div.

One for the Table and sets its width to like 640px and float it left. Set another div for the Showrecords box and float it right.

The only thing then inside the Content div is the header and the links in the bottom right corner.

And on a side note Why did you choose to use a bunch of <p> tags for you leftnav instead of an <ul>/<li> setup?

And did you set them up as an SSI or just in each page?

One other thing ive seen some people doing instead of linking to the stylesheets is using a @import url().
Supposedly it hides some of the stylesheet info from IE so it cant dick things up.
I dont know though. I use it for things like SSI's but not much else.
I used p tags for the nav bar because it's the first thing that came into my head, I don't usually bother with ul/li. Don't understand what SSI means.

matt pretty much answered the rest :)
Post Reply