|
CSS - Background Doing Funny Things When Window Resized
So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right.
I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css Similar TutorialsHi. I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions. The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow. I would be really grateful for any help you can offer. Thanks Hello all I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason Hi, I have the following horizontal navigation bar: Code: ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:956px;
font-size:13px;
font-weight:bold;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ background:#ADFF2F;
color:#000000;
}
<ul id="List" style="position:absolute;left:0px;top:90px;">
<li><a style="width:91px;" href="">something something</a></li>
............ </ul>
The trouble is when the window is resized (maximized or minimized) at certain points the last list overflows and appears on the next line. How can I prevent this, that is, keep the list on one line when the window is resized. Note I have tried using position:relative and putting the above inside <div> but neither solution worked. If the above code cannot be modified I wonder if someone has a horizontal navigation bar that does what I want. I will be very grateful for all help. Hello, For some reason I'm having difficulty with this, I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks, Jasontor Hello All. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666. How do i do this? So far i've only be able to change background colors of element tags, which is not what i need. This was the Example give for this particular step. Edit: i tried to link a picture for a visual. For some reason its blocked to new members. Any help would be appreciated. I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera. My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
I don't know why my tables look so weird, in Firefox they look fine as you can see in http://info.mooseheadbeer.com/graphics/table2.jpg - http://info.mooseheadbeer.com/graphics/table1.jpg shows what it looks like in Firefox. my CSS is as follows: Code: body {
background-color: #FFFFCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #333333;
}
td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #330000;
}
a {
color: #330000;
}
img {
border: 0px;
}
form {
background-color: #CCCC99;
}
.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
line-height: 30px;
background-color: #990000; color: #FFFF66;
}
.subtitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #660000; font-style: oblique;
}
.header {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
background-color: #990000;
color: #FFFF66;
}
.nav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
background-color: #CCCC66;
}
.navLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background-color: #DEDECA;
}
a:hover {
color: #DEDECA;
background-color: #330000;
}
.sidebar {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 18px;
padding: 3px;
background-color: #FFFF99;
}
.sidebarHeader {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 18px;
color: #FFFF99;
background-color: #999933;
font-weight: bold;
}
.sidebarFooter {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 18px;
background-color: #FFFF99;
color: #990000;
}
.footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
line-height: 22px;
color: #333333;
background-color: #FFFF99;
}
.legal {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #333333;
}
.box1 {
border-width: 2px;
border-color: #CCCCCC #333333 #333333 #CCCCCC;
border-style: dotted;
}
.promo {
font-family: "Times New Roman", Times, serif;
color: #000033;
}
.titlebar {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #FFFFFF;
background-color: #336699;
}
.dingbat {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #CCCC99;
color: #660000; font-weight: bolder; font-size: medium;
}
input.big {
width: 100px;
}
input.small {
width: 50px;
}
I've seen it before but I really want to accomplish this and my friends are saying I need to you CSS to accomplish my task. I work for a support company maintaining the web app. At random times I want to enable my "Magic Floating Button" Basically here is what I need help with. I want my submit button to move away from the user when they mouse over it. This way they can never click submit and they chase the button around all day. Please help me with how to accomplish this. Thanks, Chris I have delved into building websites using CSs instead of tables. It looks great in IE 7 and above and Firefox, but in IE 6 it is out of whack badly. Like all the divs are on one side, when all the measurements are correct and should fit. Is there something I am doing wrong, it looks right even when I look at it in Dreamweaver. Is there a special method you should always apply when building a CSS website, like always add border:none; on all divs, just the same way, that you always have to add border: 0; on all images otherwise a border will appear? I have two column divs in my main div. They have the same margin setting but the second one mainright seems to be ignoring it... and both have width tags (that's doing something). (URL address blocked: See forum rules) and (URL address blocked: See forum rules) my wrapper has a min-width of 780px Is it margin doubling? when i took the border and margin out of the mainleft div, it slammed to the wall of the container div. is there a hack for this? i want my 2 columns to have identical alignment... Code:
#left {
float:left;
width:230px;
text-align:left;
font-size: 12px; border:1px solid red;
}
#left p {/* margin:10px;*/ padding:0;}
#main {
position:relative;margin-right:100px;
text-align:left;
}
#main h1,h2,h3,h4 {margin:0; padding:0; display:inline;}
#main p {margin:5px; padding-left:5px;}
#mainleft {
margin:5px;
float:left;
width:250px;
border:1px solid red;
text-align:left;
}
#mainright {
margin:5px;
padding:5px;
/**/ position:relative;
/* float:right; only made it float right but still below the left */
text-align:left;
margin-left:490px;
width:250px;
border:1px solid red;
}
/******* THE HTML *********/
<div id="left">
<div class="prop"></div>
<!-- the old createnavbar could go here or a photo -->
<?php include 'leftcol.php' ?>
<div class="clear"></div>
</div><!-- left -->
<div id="main">
<div id="mainleft">
<h4>News</h4><br />
<p>copy.......</p>
</div><!-- mainleft -->
<div id="mainright">
<h4>Features</h4><br />
Many are free; Some have value.<p> </p>
<ul>
<li>bunch of stufff</li>
</ul>
</div><!-- mainright -->
</div><!-- main -->
I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian Perhaps this should go into a Javascript or PHP but I wasn't quite sure. I want to declare a navigation bar's text to a fixed height of 12px which I think is rather easy for MOST anyone to read. What I'm having to do is because the site owner wants a "tabbed" appearance, I'm using images for the sides and will make the background of the text various colors (depending on if their active or not). If a visitor to the site, however, has their text style zoomed, that will considerably disrupt the apparent "image" of the tabs and make it look screwey. Text must be used for SEO so making the tabs a full image is not an option. Any advice? Sorry if this should have gone to a different forum. Thanks. Tim I have finally got my page set up as required. There is one minor niggle. The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it. PHP Code: #wrap { margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/ margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.gif); text-align: left; } * html #wrap { height:100%; padding-bottom: -20px; } #clear_footer { clear: both; height: 21px; overflow: visible; z-index: 1999; /*background-color: green; Used for demonstration purposes only, remove after testing*/ } #contain_footer { left: 0; margin-top: -21px; width: 100%; height: 21px; background-color: red; background-image: url(../images/contain_footer_bg.gif); padding-bottom: 0px; z-index: 2002; } #footer { position: absolute; bottom: 0; margin: 0 auto; width: 760px; height: 21px; line-height: 21px; vertical-align: center; background-image: url(../images/footer_bg.gif); z-index: 1999; } Supposing I have an image that is 200x200 pixels, and I have a div that is 100x100 pixels. I want to place the image inside the div AND have all 4 corners of the image visible. How do I do this? The idea is to fit the image inside the div without the image looking like it got "cut off" on any of its edges. I tried simply changing the CSS width and height but that did not achieve the desired effect. I'm hoping I won't need 4 divs, one for each corner? i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer. <html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Hi, I'm trying to work a bit with divs Anyway, I got this atm: Code: #container {
margin: 0px auto;
width: 600px;
}
#menu-left {
float:left;
height:auto;
width:100px;
}
#menu-right {
float:right;
height:auto;
width:100px;
}
#content {
float:left;
width:400px;
top: 200px;
}
#article { background-color:#999999;
border:dashed 1px black;
float:none;
width:380px;
height:100px;
margin: 0 10px 0 10px}
So I got a container around all the other divs, 1 div on the left (menu-left), one on the right (menu-right) and inbetween them the (content) div. In the content I got the (article) div, I want to have more of those underneath eachother after a while. Now normally the width of the Article div would equal 400 as well and fit perfectly between menu-left and menu-right. Yet it doesnt fit PERFECTLY inbetween them. If I take 8px margin on the left it fits, how is this possible?? ___ EDIT ___ Without the 1px border it seems to fit, but why doesn't it fit WITH the border? Thanks! Here is my css code:
Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
#sidebar {
float:left;
width:140px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
padding-right: 10px;
margin: 10px 10px 10px 0px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sidebar a:link, #sidebar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sidebar a:hover, #sidebar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sidebar ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
Here is my html code: Code: <body>
<div id="page">
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span></div>
<div id="topbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/about_us/about_us.html">About Us</a></li>
<li><a href="/other_regions.html">Other Regions</a></li>
</ul>
</div>
<div id="sidebar">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Contact Us/Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
</div>
</body>
If it is more helpful - This is a link to the actual html file to view I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design. Ignore the search part - that is phase 2 so I am not messing with that at this point. Here are the problems I am trying to correct: 1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space. I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference. 2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge. In IE they are indented way too much. As always any help is greatly appreciated. Thanks! |
|||||||