2nd column acting up.

[Templarian]

http://www.lan.templarian.com/

Basically set the left to float:left; and the right column to margin-left:500px;

This works for most of the stuff I do but it refuses to work and for the life of me i cannot figure out (although its probably something dumb).

[Templarian]

BTW this works in FF and not IE. Could it be the clear:both; thats there. i tried moving it around and IE doesn't change.

[dreeft]

take out "margin-left:500px;" from your part_right CSS and add "float:left;".

Should sort it out.

[Templarian]

Worked great. Now to fix this FF background thing that happened.

/edit, anyone know how to fix the background in FF?

[Jeff Wheeler]

Yeah… that's the problem with his solution. Now both elements are floated (which is why I don't do it).

Simply use `clear: both;` on a element after the wrapper div, and it will have the correct height.

[Templarian]

Yeah… that's the problem with his solution. Now both elements are floated (which is why I don't do it).

Simply use `clear: both;` on a element after the wrapper div, and it will have the correct height.
I put it back to how i had it with what nokrev said if anyone sees why IE is doing this it would be apreciated.

[dreeft]

ah, didn't notice that. Was just using the code so I didn't have the images.

Good luck :D

[Templarian]

Wow... I'm starting to hate these things when everything works but one small little thing. Anyone think of anything?

[simplistik]

your css... i made changes to #content, your #part_left and #part_right columns and added a .clear class


/* Copyright 2006 Lan @ Templarian */
html,body{
margin:0px;
width:100%;
height:100%;
font-family:Georgia, Times New Roman, Times, serif;
color:#353535;
text-align:center;
background:#545447;
}
#main{
width:780px;
height:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#header{
background:url(style/header.png) no-repeat;
width:780px;
height:81px;
font-size:18px;
text-align:right;
}
#footer{
background:url(style/footer.png) no-repeat;
width:780px;
height:40px;
}
#part_left{
margin: 10px 0 0 10px;
width:480px;
float: left;
display: inline;
}
#part_right{
margin: 10px 10px 0 0;
float: right;
width:260px;
display: inline;
}
#content{
background:url(style/content.png) repeat-y;
width:780px;
clear:both;

}
#login{
text-align:right;
margin-top:3px;
}
#login_user{
margin-top:3px;
font-size:16px;
margin-right:3px;
width:100px;
}
#login_pass{
margin-top:3px;
font-size:16px;
margin-right:3px;
width:100px;
}
#section_upcominglans{
background:url(style/section_top.png) repeat-y;
width:480px;
}
#section{
background:url(style/section_top.png) repeat-y;
width:480px;
margin-top:10px;
}
#section_title{
float: left;
font-size:16px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
padding-bottom:4px;
}
#section_content{
float: left;
font-size:14px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
}
#section_date{
padding-left:12px;
font-size:12px;
font-style:italic;
}
#section_title_left{
float: left;
font-size:16px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
padding-bottom:4px;
}
#section_content_left{
float: left;
font-size:14px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
}
#section_title_right{
margin-left:240px;
padding-top:4px;
font-size:16px;
width: 235px;
}
#section_content_right{
margin-left:240px;
padding-top:4px;
font-size:14px;
width: 235px;
}
img{

}
#side{
background:url(style/right_top.png) repeat-y;
width:260px;
margin-bottom:10px;

}
#side_title{
font-size:16px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
padding-bottom:4px;
}
#side_content{
font-size:14px;
padding-left:12px;
padding-right:12px;
padding-top:4px;
}
#icon{
vertical-align:text-bottom;
margin-bottom:1px;
}
#login_btn{
vertical-align:text-top;
margin-right:10px;
}
#abovetext{
font-size:12px;
margin-top:2px;
}
#ex{
font-size:10px;
}
A:link {text-decoration: underline; color:#353535;}
A:visited {text-decoration: underline; color:#353535;}
A:active {text-decoration: underline; color:#353535;}
A:hover {text-decoration: underline; color:#353535;}

.clear { height: 1%; padding: 0; margin: 0; clear: both; }


your html i added this right above the <!-- End -->


<br class="clear" />

<!-- End -->


two quick things to note when doing a layout.

try not to use padding on the "container" div, or really and block level element. Reason being is because in FF it treats the padding as... well... padding and expands from the inside out so when you tell it 10px padding it says... "oh lets ADD 10px to the already existing size".So instead of having a width of say... 780 like you had you actually had 800. Two ways to remedy it... the one I have in your fixed css using margins (the best way) or you take down that 780 to 760 to allow for the 20px extra padding.

never use ridiculously large margins like you did, it's inefficient

and don't use pngs unless you need to... say for... transparency

yea... so that's 3 meh... who counts these days anywho.

[Jeff Wheeler]

two things to note when doing a layout. try not to use padding on the "container" div reason being is because in FF it treats the padding as... well... padding and expands from the inside out so when you tell it 10px padding it says... "oh lets ADD 10px to the already existing size".So instead of having a width of say... 780 like you had you actually had 800. Two ways to remedy it... the one I have in your fixed css using margins (the best way) or you take down that 780 to 760 to allow for the 20px extra padding.

Yeah, that's the proper behavior. It's called the “box model,” and is often misunderstood. There are lots of 3d visualizations to help understand it…

http://www.hicksdesign.co.uk/journal/3d-css-box-model


never use ridiculously large margins like you did, it's inefficient

Hmm, I've never heard of that being inefficient. I'm not sure you're referring to the same thing as me, but I have seen that used by tutorials and such, where you just move over from the float with another margin. Works great when one column always is shorter. It's really easy, and, in fact, I've never even seen anybody mention efficiency concerns when talking about CSS. Where did you hear this?


and don't use pngs unless you need to... say for... transparency

Hmm, do you prefer GIFs? I really am not for one or the other, but I tend to go with PNG, as they have never had any patent issues, and generally have about equal file-sizes, with more functionality like transparency if needed.

[simplistik]

well first... if it's the "proper" way that padding is supposed to work... that's fine... but the fact of the matter is... FF does it... IE doesn't which is why I brought it up.

using a huge margin... such as margin-left: 500px, when it needs to only go 20px... i'd say that's pretty stinkin inefficient. i don't need a tutorial, sean inman, john hicks, fabio, einstein or someone else to tell me that. i'm not a slave to what other people say, or haven't said. but the inefficiency is clear.

png... why? what's the purpose of using them if you're not using the transparency. file size... no, losslessness... no...
example:
http://www.beyondthepixel.com/gifjpgpng/ in their respective order
ESPECIALLY using a png for something that has less than 6 colors... yeeeeesh.

i may not be someone you hear about all over the web 2.0 beta, or someone you can google. And you'll have to forgive me for not riding on the 2.0 train, or having fan boys (although i wouldn't mind some :p: ), but i do tend to know what I'm doin too.... every now and again of course.

[Jeff Wheeler]

well first... if it's the "proper" way that padding is supposed to work... that's fine... but the fact of the matter is... FF does it... IE doesn't which is why I brought it up.

Ha, didn't mean to suggest you were wrong. I was agreeing with you, and simply giving a name to it. :)


using a huge margin... such as margin-left: 500px, when it needs to only go 20px... i'd say that's pretty stinkin inefficient. i don't need a tutorial, sean inman, john hicks, fabio, einstein or someone else to tell me that. i'm not a slave to what other people say, or haven't said. but the inefficiency is clear.

Have you ever seen slower loading problems because of this? I don't think it would affect the rendering speed at all, and even if it did, it would be unnoticable, as the speed of downloading would impede it much more. I think the advantage of the ease of use with it is worth more than the likely inexistant delay in rendering.


png... why? what's the purpose of using them if you're not using the transparency. file size... no, losslessness... no...
example:
http://www.beyondthepixel.com/gifjpgpng/ in their respective order
ESPECIALLY using a png for something that has less than 6 colors... yeeeeesh.

Wow, that's more than I had anticipated. You're correct! I've gotten into the habit of using PNG regularly, under the myth that the file sizes were roughly the same (probably got that idea based on file sizes of images with gradients, which I tend to use a lot). I'm really amazed.


i may not be someone you hear about all over the web 2.0 beta, or someone you can google. And you'll have to forgive me for not riding on the 2.0 train, or having fan boys (although i wouldn't mind some :p: ), but i do tend to know what I'm doin too.... every now and again of course.

What does anything have to do with web 2.0?

[simplistik]

Ha, didn't mean to suggest you were wrong. I was agreeing with you, and simply giving a name to it. :)
lol k :D :thumb2:


Have you ever seen slower loading problems because of this? I don't think it would affect the rendering speed at all, and even if it did, it would be unnoticable, as the speed of downloading would impede it much more. I think the advantage of the ease of use with it is worth more than the likely inexistant delay in rendering.
no i haven't but if I'm eyeballing something, it's much easier to determine that it needs to be 10px from the relative as opposed to 110px from the right of the absolute. that's where the inefficiency comes into play.



Wow, that's more than I had anticipated. You're correct! I've gotten into the habit of using PNG regularly, under the myth that the file sizes were roughly the same (probably got that idea based on file sizes of images with gradients, which I tend to use a lot). I'm really amazed.
:D



What does anything have to do with web 2.0?
has nothing to do with anything i being passive aggressive vocalizing my disgust at the misuse/oversusage of the word web 2.0 :D ... I do this quite a bit.... :lol:

[Jeff Wheeler]

Hah, I can understand the eyeballing thing, but when you design it, you have the psd readily available to measure within. Never had a problem with it. :P

[Templarian]

Thanks a ton *(for the fix and other info given). Worked like a charm. I still have to go thought the source and work out a few things.

Turns out that AOL and Yahoo browsers viewed it the same so they had to view it on FF at the lan to see it correctly.

Thanks again.

[daleth]

I was just reading this post and I had to point out to nokrev and all regarding the PNG thing: If you render out a PNG-24 and you're not using transparency, you're basically wasting an entire 6-bit channel, which is a LOT of overhead. You can render out as a PNG-18 (I think just called PNG in photoshop) which removes the alpha channel but you'll still get big files thanks to PNG's compression scheme. As with all web elements, choose on a case-by-case basis; I for one would only use PNG for transparency.

OK, that's all! :D

[simplistik]

Thanks a ton *(for the fix and other info given). Worked like a charm. I still have to go thought the source and work out a few things.

Turns out that AOL and Yahoo browsers viewed it the same so they had to view it on FF at the lan to see it correctly.

Thanks again.
your welcome.. i try to get in all my good deeds at the beginning of the months that way I don't have to worry about being mean later :D :lol: