CSS - Css Issues - Having Major Brainfart.

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

Ok so i made a site that validates in w3c check and shows ok on all browsers save for IE. Im really not sure where to begin on debugging it! http://new.mostardesigns.com/

Any help is much appreciated!

I have some small CSS issues and I need some help fixing them. Most of them are related to the difference between IE and FF.

In involved www.rodoslovlje.com and e.g.the line on the left that has a little bit space, also here it doesnt go all the way down: http://www.rodoslovlje.com/novo/article.php

Any help is apreciated. Thnx.

I am curious to know if IE8 as released is what I should be designing for? I have noticed that sites I have developed that look good in IE7 and FF look as they should, but open them up in IE8 and they do not look good at all. Tom

http://www.plsx.com

Two things.

The main menu on the left has dots as the background. As you can see on the submenus, I managed to make it so the words themselves have a white background and thus the dots don't start until AFTER the words. Just click on publishing services to see what I mean. I can't seem to figure out why I can't get it to work on the main menu. Remember, the roll overs must still work.

I need the site looking good in all 3 major browsers, Opera, Firefox and IE. If you look at it with IE, that is the way it should be working...I need the CSS changes to make them as compatible as possible.

So...

For each problem, I will paypal you $25. I don't know if this is against site rules, if it is, I apologize and please move it to whatever section it should be in. Hopefully this is easy sleazy stuff!

Thanks in advance guys! I always come here looking for help and people give it happily, I just thought I might as well offer a reward for their help!

EDIT: Fixed. I think the issue was because of the fixed positioned div tag at the top of the page. I had to set the width of the content_wrapper div.

EDIT 2: Well partially fixed. It now has the scroll bar, but when the window is decreased below 1000px in width, the floated header div doesn't scroll via the scroll bar. Any way to fix this?

On this page:
http://www.area51entertainment.co/emoto

When the page is resized below 1000px no scroll bar comes up.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<?
if(isset($_GET['investors'])){
echo '<meta name="robots" content="noindex, nofollow" />';
}
else{
echo '<meta name="robots" content="index, follow" />';
}
?>
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #FFFFFF; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
</head>
<body>
<div class="wrapper">
<div class="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2
</div>
</div>
</body>
</html>

Code:

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
}

.header_float{
width: 100%;
min-width: 1000px;
height: 35px;
top: 0px;
left: 0px;
position: fixed;
background: #49963A;
z-index: 1000;
}

.content_wrapper{
position: relative;
top: 35px;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

img{
border: 0px;
}

I am brand new to CSS and I'm having two issues. I've searched around and I cannot figure this out.

1. I cannot get text inside a div. I'm using an external style sheet and I can't seem to get text to go inside a scrolling DIV. I'm completely confused.

2. The second issue is if the window shrinks or someone is using a smaller resolution, I want the CSS to shrink the page and stay uniform as well. It also doesn't play nicely in IE.

The issue I'm having is I'm not very comfortable with my CSS yet so I'm kind of hesitant to play around too much.

Here is my code. Please don't laugh too hard :/

Code:

body {
	background: white url(xxxxxx) repeat-y center;
}

#header { 

position: fixed; top: 0px; left: 20%;

}

#headertext {

position: fixed; top: 15px; left: 268px;
width: 100%;

}

#navbar {

position: fixed; top: 150px; left: 256px;
width 100%;

}

#navbartext {

position: fixed; top: 150px; left: 240px;
width: 100%;

}

#footer {

position: fixed; top: 735px; left: 256px;
width 100%;

}

#footertext {

position: fixed; top: 747px; left: 251px;
width 100%;

}

#textbackground {

background-color: #000000;
position: fixed; top: 193px; left: 256px;
width: 768px;
height: 542px;
overflow: auto;

}

I think I did alright for a first time CSS writer but it's obviously not right.

Hello guys, my name's Ben, how y'all doing?

I recently took over a website for my uni canoe club and am trying to design a new, better looking version of the site at present. I am getting there, but I am having a few issues with CSS that I can't seem to fix. Note that I have been testing the site on Firefox, and plan to come back to any IE issues once it looks good with standards.

A static mockup (php will come later) of the site as it stands now can be found here (URL www DOT uhcc DOT co DOT uk/v3_mockup/) (excuse the dodgy slogon, that's just a placeholder from one of our old t-shirts) the two problems I am having are as follows:
I can't seem to remove the white spaces between the images in the right hand column. margin and padding are set to 0 for the images, so I can't see what is causing it I need the left and right column to extend right down to the footer. They are both set at "height:100%" but that doesn't seem to work. Also the #main div doesn't seem to extend down as far as the footer, either! ARGH!
Any help will be much appreciated!

I'm doing the CSS for IE7 and 8 for my site right now. And I'm having issues with borders for some of my div's.

http://www.netgamegurus.com/

The middle and right columns have a blue line in the middle. Those are borders that should be at the bottom if the "title" div's.

the left column is fine and the css is almost identical.

here's the css for the News div

Code:

//wrap for the div's
.sn_box { 
height:343px; 
width:572px; 
} 

//CSS for the title div
.sn_title { 
background-image:url(../images/bar_bg_003.jpg); 
height:25px; 
text-align:center; 
border-top:#4575D4 solid 1px; 
border-bottom:#4575D4 solid 1px; 
} 

//div for the content
.sn_title_txt { 
font-family:TROGLO; 
padding-top:2px; 
font-size:20px; 
color:#000000; 
}

here's what I got for the IE fix

Code:

.sn_title { 
background-repeat:repeat-x; 
}

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.


I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm


Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>
   

EDIT #2: Would have been nice if I had gotten some help. Anyways, managed to fix it by just messing around with the coding.

Here's what I did if anyone needs this as reference or help:
Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url("");
border:solid 0px #000;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url("") repeat-y;
overflow:auto;
margin-top:0px;
position: relative;
}

/* ----- NAVIGATION ----- */

#sidebar {
width:182px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;
float: right;
position:relative;
right:92px;
top:0px;
}

/* ----- MAIN CONTENT ----- */

#main {
width:362px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;

margin-top:0px;
position:relative;
left:72px;
top:0px;
}

/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url("");
margin-top:0px;
border:solid 0px #000;
}






EDIT: I fixed problems 1 and 3 but I still need help with problem 2. Why aren't my div layers moving AT ALL when I use the position: absolute value relative to another div layer????? Please help! Thanks!

Oh, forgot to mention, I'm using wordpress 2.7 in case it affects anything at all.

And here's the part of css concerning the divs :

Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url();
border:solid 0px #000;
}


/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url();
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:0px;
position: relative;
}


/* ----- NAVIGATION ----- */

#sidebar {
width:180px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
float:right;
}


/* ----- MAIN CONTENT ----- */

#main {
width:460px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
margin-top:0px;
position: absolute;
top:0;
right:30;
}


/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url();
margin-top:0px;
border:solid 0px #000;
}




Resolved Stuff: (incase anyone has the same issue and wanted to know what I did)

Quote:
Okay, I'm having trouble positioning my div boxes in the wrapper and some other minor issues that I just can't seem to make it work. They a

1) The background images are not lined up. How do I make the background images line up? (The header and footer have a background image and so does the content box). They are all off by a couple of pixels and I can't seem to get it to work. [FIXED: Just changed the size of the images, apparently css wasn't the problem.]

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does not go to the full height I specified (325 px). [FIXED: Took another route and changed my css layering entirely.]

Hi There,

I have coded this layout in CSS and have it looking correct in Firefox.

http://www.tuxdiscs.com/SE/

I realise that it is far from perfect in IE due to margins and padding. Is there an easy way to define alternative margins and padding for ie (other than having a separate style sheet)?

Thanks,

Vince

www.archanix.com/tanya/work.html

Not sure why, but the nav links appear differently in IE and FF. I want it to look like it is in FF. For some reason there is extra space in IE.

Another issue is my css image rollovers. Since the background images aren't preloaded there tends to be a brief "flash" before appearing on hover.

Damn css. This would be so much easier if I just used the javascript rollover since you can tell it to preload the images.

Any help to any of these issues would be greatly appreciated.

-Jesse

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.

Hi guys,

Just moving over to CSS from tables bit by bit and ive been taking old projects and seeing how I could do them with CSS instead of tables.

Ive got 2 problems so far I keep encountering when trying to do standard stuff.

One being the positioning of bullet point images. Its aligning too high up in comparison to the text and right up against the first letter instead of some spacing.

The other similarly with position problem. When trying to get a menu along the top to fit a certain position the text seems to align vertically at the top instead of the middle.

To see what I mean have a look at this link :

http://www.clansports.co.uk/gmscss/

If anyone has any guidance or examples I would appreciate it as im left scratching my head! Hehe! The problems im getting seem to be very niggly!

Thanks guys