CSS - <q> Tag: Ie Incompatibility And Accessibility Issues

I'm designing a webpage that uses an image for the header/logo. i need the page to have certain things:

(1) it needs to be accessible for screen readers
(2) it needs to have two stylesheets - the main one <link href= ............. media="screen"/> + one that enables printing of text only, without images e.g. <link href= ............. media="print"/>

To get (1) i need to have the alt="whatever" attribute in the html, but i can only do that if i have img src="xxxxx" in the html.
To get the print-text-only style sheet i need to have the image in the main css stylesheet e.g. background-image:url (xxx/xxx); instead of having img src="xxxxx" in the html.

So my question is: how do I get alt="whatever" if there's no img src="xxxxx" in the html? Or what's the alternative?

I hope this makes sense to you, 'cause I've been going round in circles with it!

TIA,
jifjaf

A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc?

Hi guys,

For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF).


Thank you

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

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;
}

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

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

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!

hello again,

I coded the basket page with rows and cells this time as per kk5st's suggestion. But yet here again with few problems.

see it yourself page:
http://www.refinethetaste.com/html/content/basket/basket.htm

1. I dont understand why the table is short now. it should strech up until the border.
2. I want remove button v-align at the bottom of the cell.
3. I want quantity input align right at the center.

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



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 .thdesc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .th	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .color	{ float: left; width:60px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .noncolor	{ float: left; width:60px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .intprice	{ font-weight:bold; }

#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#updatesbasket { float:left; width: 141px; height: 15px; 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">
        <table>
          <tr>
            <th class="thdesc">Product Description</th>
            <th class="th">Weight</th>
            <th class="th">Price</th>
            <th class="th">Qty</th>
            <th class="th">Total</th>
          </tr>
          
          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a> <br />
               </td>
              <td class="color">2.5LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_13' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='2' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$120</span>
              <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>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a> <br />
               </td>
              <td class="color">2.15LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><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" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <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>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a> <br />
               </td>
              <td class="color">1LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><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" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <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>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

            <tr>
            	<td colspan="2"><img alt="Update Shopping Basket" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_updatesbasket.gif" id="updatesbasket" /></td>
                <td></td>
                <td>Subtotal</td>
                <td class="color">$240</td>
            </tr>
            <tr>
                <td>Shipping Options & Charges</td>
                <td colspan="2"></td>
                <td>Total</td>
                <td class="color">$90</td>
            </tr>
          </form>
        </table>
      </div>

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>
   

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; 
}

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

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.