Page 2 of 2
Posted: Fri Aug 18, 2006 9:13 am
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.
Posted: Fri Aug 18, 2006 9:39 am
by jayshields
Post acknowledged

Posted: Fri Aug 18, 2006 9:40 am
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.
Posted: Fri Aug 18, 2006 9:58 am
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

Posted: Fri Aug 18, 2006 10:28 am
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.
Posted: Fri Aug 18, 2006 10:55 am
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

Posted: Fri Aug 18, 2006 11:16 am
by matthijs
If he mentions it I'll quote £100 for fixing it
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).
Posted: Fri Aug 18, 2006 6:39 pm
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.
Posted: Sat Aug 19, 2006 2:06 am
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?
Posted: Sat Aug 19, 2006 6:37 am
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
