|
CSS - I Really Hate Ie.. Positioning Help Please!
I'm trying to build a site:
http://smith.incyberspace.net/temp/ I left the CSS in the HTML course so you can read it easily. here is those container CSS if you don't wanna view source (i wanna make it easy on you Code:
#container { width: 900px; margin: 0 auto; }
#content { background-color:#333333; background-image:url(content.jpg); width: 640px; opacity:.40; float: left; margin-left: 120px; border-left:groove 5px #003366; border-right:groove 5px #003366; }
#showcase { width: 185px; margin-top: 23px; position:fixed; z-index:99;}
The idea for design is simple enough but I can't get the one DIV (layer) in the same place on IE as I have in Firefox The background stays where its suppose to The middle layer scrolls like it should The top image that is suppose to stay stationary does... but only lines up where i want it to in Firefox (in IE its WAY off to the right)... I dont know if this can be handled with IE only code, but I am hoping it doesnt come to browser specific hacks.. Im actually hoping i just messed something silly up Any and all help is appreciated... I been banging my head off the wall for hours. p.s. i know there is an opacity issue in IE too, but thats not nearly as impt as this one Thank you! Similar TutorialsQuote: Alright for some reason this wont work in IE. http://65.26.50.204/ec/index.php?page=1 First off the paragraph isnt moving over 8px like its supposed to, making it appear on the edge of the background in the transitional background. Second off the div's are displaying on 2 diffrent lines... they are supposed to function like table cells. The first problem appears in firefox every 1 out of 10 pageloads, for some reason. Which is bs, how is it rendering it diffrent when its the same exact data? Thats not even possible, the computer cant make its own descisions and its following the same rendering process!!! What the hell is it doing? This is really starting to piss me the hell off. I would really appreciate some help. Well I figured it out, after removing some things, which is gonna require a lot of changing in my sites structure, but oh well. I will move onto 3 other issues. 1. The bottom bar he http://65.26.50.204/ec/index.php?page=1 appears on 2 lines instead of 1, in IE only, but in FF it looks fine. 2. I would like the layouts body background to be "100%", how do I achieve that? 3. I have heard my doctype should not be HTML 4.01 Transitional (because of transitional), and I have absoulutely no idea about what doctypes to use, and where the file is located, so what should I use? (I have never used doctypes in any of my past codings, this is a first) Hi there all, Have been having a little look around and this look slike a great place o get some answers to a few design problems I have at the moment. I am in the process of updating a site and completely revamping it, from the original that I designed at lhdesignz.co.uk I have placed the beggining of my new design (only just started) on another site for testing purposes this is: webwizedezignz.co.uk My problem is this, Firefox, IE7 etc look fine but as soon as you load up in IE6 the design goes all to hell! I have had a read of some of the other posts here and they do give me some ideas but I thought it would be best just to let people see exactly what I am talking about. Hope you are able to help webwize Man i am working an an all new CSS theme and it was all going well intel i seen a bug. It only pops up in ie, the menu gets cut off 10%! If i resize the code it appears larger in firefox,opera,+ but looks ok in ie... I don't want to resize it just for IE witch only 2% of my old members used. Is there way to fix it without a major headach? Page code. Code: <div id="main_menu">
<ul id="main_menu">
<li><a href="home.php">Home Page</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
<li><a href="./login.php">Community Login</a></li>
<li><a href="./lostpass.php">Retrive Account</a></li>
<li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
</ul></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
<li><a href="#">Live Chat</a></li>
<li><a href="#">Live Demo</a></li>
<li><a href="#">Feature List</a></li>
</ul></li>
<li><a href="./forum/">Forums</a></li>
<li><a href="./blogs/">Blog</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
<li><a href="./help.php">FAQs</a></li>
<li><a href="#">Mail Us</a></li>
<li><a href="#">Phone Us</a></li>
<li><a href="./contact.php">Contact Support</a></li>
<li><a href="./tos.php">Terms Of Service</a></li>
</ul></li>
</ul></div>
Css: Code: ul#main_menu {
color: #231f20;
padding:0;
margin:0 0 0 0;
background-color:#666666;
border-left:1px solid #6b6659;
border-right:1px solid #6b6659;
border-bottom:1px solid #6b6659;
border-top:1px solid #7d786c;
}
ul#main_menu li {
list-style: none;
margin: 0;
padding: 0;
font-size:12px;
}
ul#main_menu li a {
color: #ffffff;
text-decoration:none;
padding:7px;
padding-left:14px;
padding-right:6px;
width:128px;
display:block;
border-top:1px solid #a29e91;
border-bottom:1px solid #8a8477;
}
ul#main_menu li a:hover {
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
}
ul#main_menu .selected {
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu .down {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down:hover {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down_open {
background-image:url(images/icons/minus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
font-weight:bold;
}
ul#main_menu .down_selected {
background-image:url(images/icons/back16.gif);
background-repeat:no-repeat;
background-position:130px;
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu ul {
color: #231f20;
margin: 0; padding: 0;
border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
ul#main_menu ul li a {
color: #666666;
text-decoration:none;
padding:6px;
padding-left:14px;
padding-right:4px;
width:130px;
display:block;
border:0;
background-color: #CCCCCC;
border-top:1px solid #e4decf;
font-size:11px;
}
ul#main_menu ul li a:hover {
color: #111111;
background-color:#DDFADA;
border:0;
border-top:1px solid #e4decf;
font-weight:normal;
}
ul#main_menu ul li .submenu-down {
color: #ffffff;
background-color: #7e755c;
}
Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems. The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without a) having the minimum with of the website at 1200px b) positioning the boxes absolutely Cheers I am trying to do a layout thats dynamic for different screen sizes in height. So I have a header at 120px high, footer at 40px high and I want the middle part 100% high. Can anyone help please?? I used a css generator now trying to get the 100% height going and its not working . Thanks http://stealaz.myvnc.com/438335.htm http://stealaz.myvnc.com/438335.css Hey All!!! K to everyone that has looked at my other thread, this is a totally different site with a totally different problem. Stupid problem though. tri-m.com/test/eng/ The site looks perfect in FF and IE7 but in IE6 you will see the problem. The divs with height:1px are displaying as divs with a height of 18px in IE6. URGG IE6 should be banned!!!! - Jacenta I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> I have a few more questions on css positioning. How to center the content; What about the positioning of the inside tags? If you want to position at a specific place. Code: <body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload();"> <div id="master" style="float: left; display: block; text-align: left; width: 955px;"> <div id="navbar" style="position: absolute; left: 10px; top: 10px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div> <div id="picbar" style="position: absolute; left: 10px; top: 200px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div> <div id="maindiv" style="position: absolute; left: 230px; top: 10px; border: none; background-color: #FFFFAE; width: 700px; height: 580px;"> <div id="galbar" style="position: absolute; left: 150px; top: 0px; z-index: 3;"></div> </div> </div> </body> I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7). I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12. Code:
<script type="text/javascript">
Calendar.setup({
inputField : "this_fieled_name", // id of the input field
ifFormat : "%Y-%m-%d", // format of the input field
showsTime : true,
timeFormat : "24"
});
</script>
When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6. My question is, how do i get IE to position as FF does? Here are i think the two most important files that may need affecting. Both are stock from download. http://www.empiresolutions.net/demo/calendar-setup.js http://www.empiresolutions.net/demo/theme.css Thanks much. Cesar Here is my CSS
Code: .container {
margin-top: 0;
width: 100%;
\width: 100%;
w\idth: 100%;
border: 1px solid gray;
}
.banner {
background-color: rgb(213, 219, 225);
top: 0px;
left: 0px;
width: 100%;
left: 0;
top: 0;
position: relative;
}
.content {
margin-left: 200px;
background-color: gray;
height: 100%;
left: 0;
top: 0;
position: relative;
}
.sidebar-a {
float: left;
width: 200px;
\width: 200px;
w\idth: 200px;
background-color: rgb(235, 235, 235);
height: 100%;
left: 0;
top: 0;
position: relative;
}
.footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: rgb(213, 219, 225);
}
And it outputs...this . I was wondering how I get rid of the white spaces around the banner. Thanks. Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox... what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY) page is he http://www.gr-p.com/test2.html what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to This is a snippet of what I have in my css: Code:
#page-body {
width:100%;
background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
margin:0;
padding:0 0 125px 0;
border:1px solid red;
border-top:33px solid #cfad34;
color:#fff;
clear:both;
}
The css above works great but now I want to include an image in the lower left-hand corner of the page-body also. So while I have something like the following: Code:
<html>
<body>
<div id="page-body>
.....
</div>
</body>
</html>
I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside. Any suggestions? Thanks in Advance. Hello, I've got a frame work of a site that's positioned correct in firefox, but it won't align at all in IE. If you look at it in firefox, the site frame shows correct, all centered and all of the images are looking like they are in the correct position. However, when you go to the site in IE, everything is aligned to the left and completely off. How do I get that so it's all showing in the center like it is in Firefox? Site: clayton-nichols(dot)com/Test/index.html CSS style(validated) clayton-nichols(dot)com/Test/css/style.html thanks for the help! thanks for taking the time to read my question. I have a div that I want to float right, but it is staying on the left side, and I can't figure out why. HTML: 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>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Logo {
border: 0px;
}
.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
/*clear: both;*/
}
.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}
.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}
.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;
}
.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}
.COCOL li {
margin-bottom: 10px;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
.LinkList li {
margin-top: 10px;
list-style-type:none;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}
I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv help? I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went. learnware .com . au/css/index .htm The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle. I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at. I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far! (Sorry if I've disobeyed any forum rules) Hi all, I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag. The problem is that the second <ul> floats left underneath the <h1>. Any suggestions? Relevant HTML: Code: <div id="header"> <h1>Athena:</h1> <ul> <li><a href="library.php" alt="Browse Library">Library</a></li> <li><a href="project.php" alt="Browse Projects">Projects</a></li> <li><a href="personal.php" alt="Browse Personal Section">Personal</a></li> </ul> <br /> <ul> <li><a href="" alt="">Subhead1</a></li> <li><a href="" alt="">Subhead2</a></li> </ul> </div> Relevant CSS: css Code: Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }
Also - is there anyway of getting the <li>'s to be the same width? Thanks heaps, --Simon I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right. (openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here. I'm hoping someone with css expertise can help me get this set up correctly. >>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change. I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<< Thanks in advance for any help. G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated. HTML Code: <table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800"> <tr id="upper_nav" height="198"> <td valign="bottom"> <ul class="navlist"> <li> <a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li> </ul> </td> </tr> </table> Code: .navlist li { font-size: 12px; font-family: Helvetica, Times, serif; display: inline; list-style-type: none; padding: 0px 10px; border-right: 1px solid black; float: left; position: relative; } #upper_nav { background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg'); background-repeat: no-repeat; } |
|||||||