12 replies [Last post]
burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

In all browsers so far, this site has a gap between the right side column and the main content column - it fixes itself in IE if you click the home button, but if you click one of the navigation buttons which drops down the second level of navigation, the problem recreates itself.

What is the problem here?

Site: http://www.unm.edu/~unmbsu/spp-trial/spp_trial-2.html
CSS: http://www.unm.edu/~unmbsu/spp-trial/css/spp-2.css

"Seriously."

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 6 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

experiencing broken-ness

Could you provide a screenshot of the problem. Seems fine in IE. A bit messed up in Mozilla Firebird (see attached image). This also happens if you resize IE with a width equal to the image you placed. I'm a beginner in CSS but I hope you dont mind these suggestions:

- make the right column fixed width ( like 150px ) since you would be posting small items here. if you dont like fixed width, try adjusting the width of the right column to something smaller (<24%). or your content area width to <75%;
- add a spacer at the end of your float's like:.spacer { clear: both; }

Hope this helps.

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

experiencing broken-ness

Thanks for your post...

It looks better because I did some fixing. To make the right side stay up next to the main content space, I had to set #content width:75% and #rightside width: 24% - but after setting a child attribute height:auto for both content areas, they seem to work now in IE and Opera. If I made them =100% it did what it still does in Firebird/Mozilla. Changing the divs from class= to id= seemed to take care of part of the problem for some reason, though I don't know why...

I couldn't make the static width work at all - it fouled up everything - that's what I was going for in the first place and if I can make that stick, I'll definitely go that route. I will try again later - adding your spacer attribute. I am not familiar with the spacer, so I'll have to read about that online somewhere.

(does the fact that I have some of the code in a .js document.write() file have anything to do with the errors I'm getting?)

I appreciate your help!

Incidentally, that small square image on the right side is supposed to be in the lt.grn content space - it is in Opera, but in IE it isn't. Ideas on that one?

"Seriously."

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 6 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

experiencing broken-ness

For a nice example of right-sided menu or column using absolute positioning and fixed width - bluerobot.

More layout examples are available here.

I dont know much about javascripts, so I really cant comment on whether "document.write()" has any effect. What I do know is that I try to minimize using js as much as possible, since some use javascript-disabled browsers. General accessibility of the site (and all of its features) is compromised in this case. Well, that's my two-cents worth.

About the clear:both style, this is to let the space occupied by float's to take effect, since in essence, float's do not occupy any "space". You could see an example at real world style. This is usually the trick used when you have floated columns and a footer. This is to make sure the footer stays at the area where the longest column ends.

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

experiencing broken-ness

So I got the right column/left column issues mostly straightened out, but with some exceptions.

in IE: there is a margin separating the right and left columns, of about 3px. The border on the bottom of the left column is there to play that mystery margin off as "intended."

in Opera: the right column has no margin or padding between it and the left column, smashing my div containers right up against the left side. Also, it is not being contained to it's specified area.

in Mozilla/Firebird: the right column is acting just like in Opera, but the elements inside the right column are spilling out.

Ideas this time? I've done layouts like this before without any such messes...what's the deal here? The main issue to me is that margin between the right and left columns - it's presence first of all, and then it's apparent vacuum wherein it's sucking my div containers...

http://www.unm.edu/~unmbsu/spp-trial/spp_trial-2.html - the CSS is in the same place as above.

"Seriously."

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 6 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

experiencing broken-ness

I dont know if this is a similar problem but the 3px additional padding or margin is an IE-only phenomenon. This was discussed in positioniseverything. They call it "The IE Three Pixel Text-Jog". Actually, I recently inquired about this also in [url=http://www.csscreator.com/css-node/575 thread[/url] here in csscreator. Now, I'm sharing it with you. I dont know about a solution (I gave up on it and lived with having that 3px in IE), but you could try the different layouts provided in the links of the previous reply.

And some suggestions, try these:

1) To solve the Mozilla/Opera columns problem:

html>body #rightcolumn{
	width: 32%;
}
This has something to do with the difference in the box model implementation of the browsers. You would be adjusting this if you made additional paddings and margins.

2) I think the spacer is a bit misplaced and pagenote was mis-"casted" (or was this intended?), it should be:

<div id="content">
         ...
	/* not here */
</div>

<!-- Script for Right Column -->
<div id="rightcolumn">
        ...
</div>
        /* but here */
        <div class="spacer"></div>
         /* id should have been class */
	<div class="pagenote">COPYRIGHT 2003  - ASIRF&copy;</div>

And also, you forgot to define your spacer class in your css file.

BTW, the link to your css is a bit old. It should point to your spp-3.css. Wink

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

experiencing broken-ness

quick note before I head out for a bit...

1) I will look at the resources you posted. Thanks for directing me to the 3px IE issue - so stupid, these browers and their handling of "standards."

2) The spacer thing I'll correct - that was a mistake.

3) I was pointing to my spp-2.css because I was lazy and saved some changes into my spp-2, as my spp-3 got fubared... easier to change the link while i'm still having things approved. I'll fix it all later. Smile (famous last words)

Thanks again for all your help!
j

"Seriously."

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

experiencing broken-ness

That was a good fix for Opera - that looks sweet, just like I intended. Thanks JaGGer!

However, in Moz/Firebird I'm more hozed than before. It's now just dropping the whole right side below the left side. What's up with that. :?

http://www.unm.edu/~unmbsu/spp-trial/spp_trial-3.html - full screen
http://www.unm.edu/~unmbsu/spp-trial/spp_trial-4.html - centered

"Seriously."

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 6 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

experiencing broken-ness

I had a quick look at your codes and they seem okay. But I noticed these:

- you decided not use float for your right column, was this intended? a quick solution would be add float:left or float:right to your right-column. And since you added some padding, you also have to adjust the width,

html>body #rightcolumn{
	width:27%; 
}
for the full screen. Make this 26% for the centered.

- if you decided to float the right column, i think the spacer would be more effective when,

<div id="content">
/* delete it from here */
</div>
<div id="rightcolumn">
/* delete it also from here */
</div>
/* place it here */
	<div class="spacer"></div>

Well, that was just a quick look, and mind you I'm new to CSS too. Hope you will find a better solution.

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

experiencing broken-ness

Thanks again. I'll throw that in tomorrow and check out the results. You'll notice that on my personal site I had none of these problems in a similar two column layout - but with more complex aims, there are more complex problems I guess. Que sera sera.

"Seriously."

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 17 years 18 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

hurrah!

I put the float right instruction BACK in and all seems wonderful!

You know, I had both columns floated their respective directions to begin with and through my troubleshooting, I removed it from the right column and never put it back. It seems that Moz/Firebird likes to have that in there, else it uses float:left as a default(?).

I see that you prefer Firebird - you should use Opera for a week and see what you think - I love opera and use it a lot on my windows pc and my redhat box.

Anyway - Thanks again for all the help!

(This has been my longest thread ever - and the one that shows exactly how much I still have to learn!)

"Seriously."

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 6 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

experiencing broken-ness

Putting float:left or float:right would solve the problem. By default, any element is considered static or is displayed according to normal HTML layout (I've read it somewhere). I just dont know why they (browsers) differ in rendering this.

I have already tried Opera back in v5.0. In fact, I tried it before I did with Moz. Firebird. Then I discovered mozFB. I just want a multitabbed fast & customizable browser and none of the email clients & other additional features. I used Opera until v6.0 and also tried v7.0, but I was already taken by mozFB. Well, to each his own. Wink

I'm also learning CSS and still have much to learn. And I'm glad to help one way or another. In the process of helping, I'm also learning. Smile

sikis
Offline
newbie
Last seen: 11 years 30 weeks ago
Joined: 2009-05-01
Posts: 1
Points: 0

thanks

This comment has been moved here.