• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

some more css positioning issues

S

Stupid2

Gawd
Joined
Sep 8, 2001
Messages
553
hola,
I've got a site mostly working right now except I just noticed that in a browser resized to 800x600 the page now has horizontal scrolling. My original intent was for the page to resize to 800x600 with no horizontal scrolling.
I also have the issue that when the user resizes the browser, the page doesn't quite work right unless you refresh (I tried a javascript to refresh on resize but it really didn't work at all - any info on a good one is welcome).

Also, in Firefox, my news div is all wanked out and I just don't have a clue what is causing that. Any input is welcome - also pointing out necessary hacks to make other browsers happy would be welcome as I still haven't quite gotten that whole thing (site has been tested in ie6 and firebird/firefox only so far).

thanks much for any input!!!
http://69.36.167.110/test/testing.php

---forgive the jobs portion now as that just sucks, most text and etc., is just filler for the time being---

thanks again!
 
One thing that's probably causing the scrolling is the large banner image. Unless you make that a CSS background-image, it's definitely going to have to scroll when the browser viewport is less than the width of the image. Looks nice, but there are definitely some problems when it gets small.

Edit: Come to think of it, one trick I used in the past was to make the image a background-image for a div that had 100% width. That way, the image would always be rescaled to fit in the window. The image doesn't always look great when rescaled, but it might be something to think about if you're stuck with the huge picture.
 
Ok from what I can gather your using a div around all others to center everything - therefore everything else should have an integer margin / padding, then the contents will be moved inside each section without the warping your getting

In theory the large image will just 'poke' out the side of the page without the scroller

also, with the image being 800 pixels wide margins + broswer sides is gonna be more like 900 pixels so you've got problems there

looks good tho.
 
thanks to both of you for the input,
I'm not concerned with someone scrolling at sub 800 pixel width but I had hoped to have it sized to work right in 800 pixels. I'm certain that I'm off with some padding and borders and such but I'm just not strong in the browser bugs area to really grasp what needs to be done about that. The bug in firefox is also annoying because I just don't understand what could be causing the distortion of the news div.
I'll post the css code here (I know I'm sounding a bit needy ;) but I'm just having a difficult time identifying these issues and I really want to get this thing done and live asap). Thanks again!!
Code: 
body{
background-color: #336699;
background-image: url(pagebackground.gif);
color: gray;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
font-family: verdana, tahoma, sans-serif;
text-align: center;
font-size: 12px;
line-height: 18px;
}
div.makecenter{
position: relative;
width: 800px;
height: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
#frame{
width: 800px;
height: 31px;
background-color: #006699;
border-bottom: 1px solid black;
}
#header{
width: 800px;
height:200px;
text-align: center;
border-bottom: 1px solid black;
}
#nav{
width: 800px;
height: 42px;
background-color: #FFFFF7;
color: #FFFFF7;
border-bottom: 1px solid black;
}
#menu{
background-color:#FFFFF7;
width: 800px; 
text-align: right;
float: right;
}
#logo{
float: left;
padding-left:2px;
}
#search{
width: 800px;
height: 23px;
padding-top: 4px;
padding-bottom: 4px;
background-color: #006699; 
border-bottom: 1px solid black;
}
#content{
background-color: white;
width: 800px;
height: 423px;
* height: 425px; /*for ie only*/
color: black;
}
#leftcont{
width: 588px;
height: 415px;
* height: 425px; /*for ie only*/
float: left;
overflow: auto;
background-color: white;
margin-left: 5px; 
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
* margin-bottom: 3px; /*for ie only*/
}
.rollover a:hover{
font-size: 14px;
background-color:#006699;
color: white;
}
#login{
width: 200px;
margin-top: 100px;
margin-left: 225px;
}
#downloads{
margin-left:150px;
margin-top:25px;
}
#download{
margin-left:50px;
margin-top: 50px;
}
#news{
height: 415px;
* height: 425px; /*for ie only*/
width:182px;
float:right;
background-color:#F5F5F5;
overflow: auto;
border: 1px solid black;
margin-left: 3px;
margin-right: 5px;
* margin-right: 3px; /*for ie only*/
margin-top: 5px; 
margin-bottom: 5px;
* margin-bottom: 3px; /*for ie only*/
} 
#newscont{
margin-left: 3px; 
margin-right: 3px;
}
#newshead{
height: 25px;
background-color:#006699;
color: white;
text-align:center;
}
#footer{
background-color: #C1CDCD;
width: 790px;
height: 30px;
color: gray;
text-align: center;
border: 5px solid white;
}
#footerbord{
width: 788px;
height: 28px;
border: 1px solid black;
}
 
zero,
thanks much, I haven't validated the page in some time - looks like I've drifted away from valid. I don't expect the css to be valid as there are some hacks in there that fix some things in ie. I defintely need to fix that xhtml stuff though. Thanks.
 
After tinkering around with the code a couple of minutes, I noticed a few things were causing the horiz scrollbar at 800x600.

--IE adds a vertical scrollbar to the window even if there is no need for it, unlike Mozilla. I noticed that if you set the width to 800px, the scrollbar would take up 21px of that space, and would cause the horizontal scrollbar to appear. Now, if you make it 779px wide (800px-21px from the scrollbar), it would fit perfectly without a horizontal scrollbar. This would mess things up a bit in mozilla, though, since it doesn't display the vertical scrollbar when it's not needed (making the width truly 800px instead of 779).

--I believe some of the side borders are also adding to the widths, and I think you have to fix the div's widths to account for the border widths. For example, if you have a 800px wide div, with a 1px border all around, the final width would be 802px (+1 on each side). This is just a guess, though. I say this because I noticed a change on the amount of scrolling needed after removing the side borders for some divs on your page. I believe mozilla treats borders differently by adding them inside the div, and not outside (adding to its total width). This is all speculation, though, can ignore this if it all works with just taking into account the scrollbar. I don't really feel like testing right now.~

--There is something else wrong, not sure what it is. I guess you'd have to recheck all the widths and see what it is.


I stripped the code down to just the content div in the body (with no divs inside the content div, just by itself), and found out about IE's vertical scrollbar problem. I think you shouldn't complicate things so much by setting everything inside the body to a fixed width. Guess that's about all I have for now.

Oh, and there shouldn't be a need to make different settings for IE and Mozilla like you did with some margins and some heights. Why exactly are you doing this? Maybe you have a reason for the heights, but I see no reason at all for the margins.

EDIT: Oh, and surely there's a way to deal with the horizontal differences between IE and mozilla (such as checking which browser the user is using), but there must be a simpler workaround for this... This is why I hate dealing with fixed widths on everything. Using fixed widths on some things is fine (even neccesary in most cases), but on everything? And yeah, noticed some invalid XHTML (such as some <br>'s, though I wasn't really paying attention to that part.
 
Anarchonixx,
thanks for all that input. I think I'm going to have to shrink the width of everything down to 700 odd px just to make sure things work in 800x600 (don't mind if there is some bg visible then). I originally had an overflow:auto on the news div and once I removed that the bug in firefox went away (e.g., distorting the news div on resize to 800x600), however I'd really like to know why that should cause a problem in mozilla/firebird.
I did fix all of the xhtml validation problems.
thanks.
 
You must log in or register to reply here.
Back
Top