|
CSS - Center #main <div> In Ie + Stretch Gradient Background? (was "css Problems")
hey, i have 2 CSS problems.
number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE. Code: #main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }
Code: <div id='main' align='center'> number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page? thanks. Similar TutorialsI'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks I will say first: I have no clue what I am doing. Everything I am attempting has been 100% self-taught through tutorials and just looking at source code of other sites. I am trying my hardest, but am nearly in tears with frustration. It's such a "simple" problem, but I have NEVER found a workable solution. I have seen unanswered forum questions going back 6 years with this question, but no replies ever. If I can't find the answer, then this non-profit org is gonna just have to find someone else to do it. The only reason it's my job is I appear to be the only member capable of at least trying to understand how this works. So, that emotional outburst done, here is the problem: The site needs to be fixed-width with all the content centered in the browser. The header is at the top, the footer is at the bottom, and content in the middle. The content is variable in height- it is updated regularly and will never be the same. Sometimes the content will require the WHOLE page to scroll (I loathe scrolling divs within the site, they look horrid). The issue is NOTHING will stay contained! The background won't stretch to fit the content, the content overflows everywhere, and there's always mysterious empty space at the bottom, etc. Because I am so frustrated, I am going to paste EVERYTHING I have written so far. I know you don't have my imgs, but they are nothing more than a logo at the top (which, being in a table, is working just fine) and some simple gradients to give a soft edge along the left, right, and bottom. The bottom edge won't stay at the bottom, the content covers the footer, the content div refuses stretch, and I have tried trial-and-error on nearly every tag and attribute I can find/think of. I am at my wit's end. (I have "placeholder" text in place to show what happens when content gets longer) So, My CSS (external style-sheet): Code: body {
text-align:center;
background-color:#1a5026;
color:#09380e;
margin:0;
padding:0;
}
#main {
background-color:#d1e2b8;
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
}
#left_col {
background-image:url(LefCol.png);
width:8px;
height:100%;
position:absolute;
}
#right_col {
background-image:url(RiCol.png);
width:8px;
height:100%;
position:absolute;
top:0px;
right:0px;
}
#header {
position:absolute;
padding-top:10px;
padding-left:30px;
padding-right:30px;
top:0px;
height:160px;
width:800px;
}
#content {
position:relative;
top:180px;
margin-left:auto;
margin-right:auto;
width:800px;
min-height:500px;
text-align:left;
}
#footer {
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:800px;
height:50px;
text-align:center;
bottom:15px;
}
#bottom {
position:relative;
width:900px;
height:12px;
background-image:url(BotBord.png);
}
font.top-text {
font-size:60px;
text-align:left;
}
font.catchphrase {
font-size:24px;
text-align:center;
}
table.head-table {
margin-left:auto;
margin-right:auto;
width:700px;
height:144px;
text-align:left;
}
My HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="gsca_style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BLANKETY BLANK BLANK</title> </head> <body> <div id="main""> <div id="left_col"></div> <div id="header"> <table class="head-table"> <tr> <th width="165" rowspan="4"><img src="GSCA_Logo.png"></th> <td width="571" height="24"></td> </tr> <tr> <td height="43"><div align="right"><font class="top-text">Gresham Sister Cities</font></div></td> </tr> <tr> <td><div align="right"><font class="catchphrase">Culture. Education. Economics.</font></div></td> </tr> <tr><td></td></tr> </table> </div> <div id="content"> <br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> </div> <div id="right_col"></div> <div id="footer">CLick here click here click here click here<br> click me click me click me click me</div> <div id="bottom"></div> </div> </body> </html> UPDATE: As if I wasnt already angry enough, I tried "validating" my code, and the "errors" are all wrong. It gives me 17 errors, mostly about <br> tags it SAYS aren't closed, but they are. What I wrote is what the suggested "fix" is, so I can't fix it if it aint broke. Hi, I'm using XHTML & CSS (strict dtd) and using one large table to format my pages. Within the table I have different alignments and any other sort of thing that you would find in a table. W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape?? Everything within the table is great, but the table itself is not centered. I'm using CSS in the following manner to try to center it currently Code: <!-- All the doctype stuff and head tags go here...--> <body style="text-align:center"> <!-- Rest of the document --> It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape. As you may know "<center>" is not defined in the XHTML strict dtd so that options out. Thanks for any help or suggestions, Kalan I've been trying to find a "solution" that allows me to have a parent <div> (with a fixed position-centered) on a browser page, and have it contain multiple nested <div> tags. I want to be able to do this so it works on both IE and FF, as well MAC. Through several attempts I've utilized a background-image--but don't believe that is compliant with "all" recent platforms, etc. I've also been able to place the nested <div> tags but then shove the parent div's image down ... Does anyone have thoughts, links, suggestions or a quick example to toss my way? Thanks Much and Happy New Year! Des what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts Okay, I'm sort of learning as I go here. I had thought I would use a locker as the background, but then I decided to try learning how to do a liquid design (and positioning, oooo) and that kind of screwed me up because now I don't know how to do the locker sides (gap between door and frame like at top). In a fixed width, I'd put a bg graphic that spanned #container, but in a flexible width design...I'm confused. Do I have to do some stretchy hijinks (layered divs w/bg images) like I did w/the top? That would be very confusing, if so... This is the first of many questions to come, I'm sure. The horribly pedestrian design is at http://www.describe.org/projects/describe/ I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though! View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about. Here is the CSS that came with the template I'm using: Code: body {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}
div.top {
height: 50px;
background-color: blue;
border-bottom: 2px solid #eaeaea;
color: #fff;
}
div.top h1 {
letter-spacing: -2px;
font-size: 40px;
margin: -5px 0 5px 0;
padding-left: 10px;
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
padding: 10px;
font-family: tahoma;
}
div.left h2, div.right h2 {
border-bottom: 1px dotted;
font-size: 16px;
padding: 10px;
margin-top: -0px;
}
div.right h5 {
margin-left: 10px;
margin-top: 0px;
}
div.left {
background-color: #fff;
padding: 5px;
float: left;
min-height: 400px;
width: 200px;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.right {
background-color: #fff;
padding: 5px;
min-height: 400px;
margin-left: 220px;
border: 1px solid #fff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.footer {
clear: all;
margin-top: 15px;
border: 1px solid #fff;
font-size: 90%;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ul.menu li {
border-bottom: 1px solid white;
padding: 1px;
}
blockquote {
padding: 10px;
border-left: 1px dotted blue;
}
ul.menu li a {
padding: 5px;
display: block;
text-decoration: none;
border-bottom: 1px dotted;
border-left: 1px dotted;
padding-left: 15px;
font-size: 85%;
}
ul.menu li a:hover {
background-color: #eaeaea;
border-left: 10px solid blue;
padding-left: 6px;
}
p {
padding: 5px;
font-size: 90%;
}
img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder { float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border { border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }
span.gray a { color: #808080; text-decoration: none; }
The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem. Any help would be appreciated! Thanks! http://www.pocketfives.com/badges/triple-crown/ Don't we all just love IE7? The heading 'About the badge', in div about-badge should have some css assigned to it(background on the h2 etc..) but IE7 isn't rendering it. According to Firebug Lite it's assigned correctly. The page renders normal in all other modern browsers. The area of the page in question passes xhtml validation as well. Ideas? Hi, I have tried my hand at creating a box to set a fake image map over a background image, without luck. (But, I'm a total dork using css. Absolute beginner.) I have been trying the instructions he http://www.position-relative.com/tutorials/tute1_css_bg_image.php However, my background image is set into the body css spec, though I have only tag styles + the body's background image set using css. The rest of my page is tables, so I am wondering if I need to set the background image [for my whole page] using the .box1 spec shown on the tutorial at the link above? And if not, I don't know where / how to use the "#box-link {" noted in this tutorial. Or, if there is a different way to set the links on my css body spec'd background image... ? My background image css spec: Code: body {background-image:url("images/Header.jpg");
background-repeat:no-repeat;
background-position:top;
}
(I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? I've been puzzling over this for a while now! I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right. I have created two pages to demonstrate the problems that I am having. http://www.explosiveracing.net/xmed...all_content.htm This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it. http://www.explosiveracing.net/xmed...ong_content.htm This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears! Any ideas? Greetings, and thank you for your help. I have a css which spec's a background image in the styles.css: #mainmenu { clear:both; padding-bottom:5px; margin-top:22px; margin-left:18px; margin-right:24px; background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position:right top; text-align:left; } I am working in drupal. The image mainmenubg.jpg serves as the background for the site. My question is, is there any method (script or whatever) to have different images serve as the background so that as the user clicks thru the site, a different background appears. I realize that if I do this in static html, it would be fairly easy but this is one of the inflexibilities of drupal. Any help would be appreciated. Thanks! Pradhan Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? |
|||||||