CSS - Learning Css - I Don't Understand Why Ie Doesn't Show The Same As Firefox
Hello! I am learning CSS on my own which is an authentic crusade
So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand. I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me? Quote: http:// nicetobehere-btemplates.blogspot.com/ And since the code is too big to post here you can download it from here Quote: http:// btemplates.com/2009/01/16/nice-to-be-here/ I will apreciate very much if you can help me with this!! Similar TutorialsI can't get the css to show the top border http://www.****copz.com Code: #navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #000; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #000; border-bottom: none; background: #FF5555; text-decoration: none; } #navlist li a:link { color: #000; } #navlist li a:visited { color: #000; background: #0033FF; } #navlist li a:hover { color: #000; background: #7575FF; border-color: #227; } #navlist li a#current { background: white; border-bottom: 1px solid white; border-top: 1px solid #000; } a:link { color: #000; text-decoration: none;} a:visited { color: #0033FF; text-decoration: none; } A:active{ color: #0000ff; text-decoration: none;} A:hover{ color: #FF0000; text-decoration: none; background-color: #ffffff;} Hi everyone...new here and I hope you can help! Thanks is advance! I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site: romanceplaybook I can't post the entire URL because I'm a new registrant. But just put dot com at the end. Not that the page background is white. It should be repeating the image bkgd.jpg Here is the CSS: body { background: #ffffff url(images/bkgd.jpg) top repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #ffffff url(images/bg.jpg) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px 300px 0px; padding: 0px; } /************************************************ * Hyperlinks * ************************************************/ a, a:visited{ color: #507AA5; text-decoration: none; } a:hover{ text-decoration: underline; } /************************************************ * Header * ************************************************/ #header { background: #FFFFFF; width: 1000px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; text-align: center; text-transform: uppercase; } #header a { font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 48px; color: #333333; text-decoration: none; padding: 0px 10px 0px 10px; margin: 0px; text-transform: uppercase; } #header a:hover{ color: #333333; } /************************************************ * Navbar * ************************************************/ /************************************************ * Left Sidebar * ************************************************/ #l_sidebar { float: left; width: 160px; margin: 0px 20px 0px 0px; padding: 20px 0px 20px 0px; } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #l_sidebar li { list-style: none; margin: 0px; padding: 0px; } #l_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #l_sidebar ul li a { color: #507AA5; text-decoration: none; } #l_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Right Sidebar * ************************************************/ #r_sidebar { float: right; width: 160px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; } #r_sidebar p{ padding: 2px 0px 16px 0px; margin: 0px; line-height: 20px; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #r_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #r_sidebar ul li a { color: #507AA5; text-decoration: none; } #r_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Content * ************************************************/ #content { width: 950px; margin: 0px auto 0px; padding: 0px; } #content p{ padding: 0px 0px 15px 0px; margin: 0px; line-height: 20px; } #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #content h1 { color: #333333; font-size: 22px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: normal; padding: 0px 0px 0px 0px; margin: 0px; } #content h1 a { color: #333333; text-decoration: none; } #content h1 a:hover { color: #658DB5; text-decoration: none; } #content h2 { color: #333333; font-size: 14px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 0px; margin: 0px; border-top: 1px dotted #C0C0C0; border-bottom: 1px dotted #C0C0C0; } #content p ol{ margin: 0px; padding: 0px 0px 0px 20px; } #content p ul{ margin: 0px; padding: 0px 0px 0px 20px; } blockquote{ margin: 0px 0px 0px 25px; padding: 0px 25px 0px 10px; font-style: italic; color: #666666; border-left: 3px solid #B3C8DB; } #content blockquote p{ margin: 0px 0px 20px 0px; padding: 0px; } #contentmiddle { float: left; width: 550px; margin: 0px 0px 0px 0px; padding: 20px 5px 10px 20px; text-align: left; } #contentmiddle p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } .contentdate { background: #FFFFFF url(images/date.gif); float: left; width: 45px; height: 50px; margin: 0px; padding: 0px; } .contentdate h3 { color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 0px 0px 10px; margin: 0px; text-transform: uppercase; } .contentdate h4 { font-family: Times New Roman, Helvetica, Sans-Serif; color: #999999; font-size: 21px; font-weight: bold; padding: 5px 4px 0px 0px; margin: 0px; text-align: center; } .contenttitle { float: left; width: 480px; margin: 0px; padding: 0px 0px 0px 10px; } #contentmiddle ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #contentmiddle ul li { margin: 0px; padding: 5px 0px 0px 0px; } #contentmiddle ul li a { color: #507AA5; text-decoration: none; } #contentmiddle ul li a:hover { color: #507AA5; text-decoration: underline; } #content img.wp-smiley { float: none; border: none; padding: 0px; margin: 0px; } #content img.wp-wink { float: none; border: none; padding: 0px; margin: 0px; } .postspace { background: #EFEFEF url(images/spacer.gif); width: 440px; height: 32px; margin: 0px; padding: 0px; } /************************************************ * Footer * ************************************************/ #footer { background: #FFFFFF; width: 952px; margin: 0px auto 0px; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #C0C0C0; } /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { width: 190px; background: #EFEFEF url(images/search.gif); color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; padding: 3px; margin: 8px 0px 0px 0px; border: 1px solid #C0C0C0; } /************************************************ * Comments * ************************************************/ #commentblock { width: 395px; background: #EFEFEF; color: #333333; float: left; padding: 10px 20px 0px 20px; margin: 10px 0px 10px 0px; border: 1px solid #C0C0C0; } ol#commentlist { padding: 5px 0px 5px 0px; margin: 0px; list-style-type: none; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } .commenttext-admin { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } #commentsformheader{ padding-left: 0px; } #commentsform{ text-align: left; margin: 0px; padding: 0px; } #commentsform form{ text-align: left; margin: 0px; } #commentsform p{ margin: 0px; } #commentsform form textarea{ width: 99%; } p.comments_link img{ margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } Hey everyone, I am making a design for my own pleasure, and for some reason IE7 does not even show the menu. Here is my code. 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Untitled - Design 1</title> <style type="text/css"> /* <![CDATA[ */ body { background-color: #DDDDDD; color: #000000; text-align: center; /* IE5/Win hack, why do I bother with IE5/Win? */ font-family: verdana, tahoma, sans-serif; font-size: 10pt; margin: 0; padding: 15px; } a img,a { border: 0; } a,a:link { color: #000000; text-decoration: underline; } a:visited { color: #000000; text-decoration: underline; } a:hover { color: #0096ff; text-decoration: none; } #container { margin: 0 auto; width: 79%; height: auto; text-align: left; } #outer { background-image: url( bg_top.gif ); background-repeat: no-repeat; height: 86px; padding: 15px; } #inner { margin-top: -16px; background-image: url(body_bg.gif); background-repeat: repeat-y; background-position: top left; padding: 15px; } #leftmenu { float: left; width: 202px; } #leftmenu p { border-left: 1px solid #0099cc; border-right: 1px solid #0099cc; text-align: center; /* Blah, damn whitespaces */ margin-top: -15px; margin-bottom: -5px; } #leftmenu h1 { height: 35px; background-image: url( header_top.gif ); background-repeat: no-repeat; font-size: 15pt; color: #FFFFFF; } #menulast { background-image: url( menu_bottom.gif ); background-repeat: no-repeat; background-position: top left; height: 18px; width: 202px; } .cleareasy { clear: both; /* Good bye gullotine bug :) */ } /* ]]> */ </style> </head> <body> <div id="container"> <div id="outer"> asdfsdaf<br /> asdfsdaf<br /> asdfsdaf<br /> </div> <div id="inner"> <div id="leftmenu"> <h1>asdfasdf</h1> <p> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> </p> <div id="menulast"></div> </div> <div class="cleareasy"></div> </div> </div> </body> </html> And also IE5 shows spacings, which other browsers don't because of the negative margins I have said, anyway to do get rid of those? I don't have much experience using CSS, but I flatter myself that I can at least code a sheet which is readable by my HTML pages. I've uploaded a stylesheet for my page at http://noblecarrots.com/index.php at http://noblecarrots.com/stylesheet.css rather than coding CSS in the HTML itself as I had done previously. The problem is that, during the transition, all of my styling has vanished. See for yourself - my links all check out, my CSS validates, and everything else seems fine, but you're still staring at Times New Roman and whitespace on my homepage. If this turns out to be down to a typo or something similar, then I apologize in advance. I can only imagine how much of that kind of canooli you get on this forum. Oh, and in case it makes things easier, here's my CSS. I think you'll agree it's just fine: Code: body { font-family: Garamond, Georgia, serif; background-color: #c9c299; color: #41383C; width: 30em; text-align: justify; margin: auto; } img:link { border: none; } a:link { color: #41383C; text-decoration: none; font-weight: bold; } a:visited { color: #41383C; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; font-weight: bold; } a:active { color: #41383C; } .logo { width: 16em; float: left; margin: auto; position: relative; top: 0px; } .about { width: 13em; font-size: 0.9em; float: right; margin: auto; position: relative; top: 15px; text-align: left; } .briefs { position: relative; text-align: justify; line-height: 100%; margin: auto; } .quote { width: 25em; text-align: justify; line-height: 100%; } ul { width: 22em; text-align: justify; line-height: 125%; } .star { text-align: center; line-height: 100%; word-spacing: 2em; font-size: 2em; font-family: "MS Gothic"; } .footer { width: 40em; font-size: 0.9em; } .footer a:link, .footer a:visited, .footer a:hover, .footer a:active { font-weight: bold; } h2 { font-size: 3.75em; line-height: 5%; } h3 { font-size: 1.25em; } I've taken out a snippet of the code thats not working and put it into a page here, both validate (sorry I didn't make them links as I'm a new user and it won't allow me to): ucair.cs.uiuc.edu/pdovyda2/test.html ucair.cs.uiuc.edu/pdovyda2/test.html Basically there should be 8px of padding on the table with class 'innerbox', and it works fine in FF but in IE it ignores the padding completely. I can't seem to figure out what the issue is, it seems like it should work just fine, any ideas? Thanks! Hey everyone, I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7. 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ /* globals */ * { margin: 0; padding: 0; } body { background-color: #0E1211; color: #FFFFFF; font-family: tahoma, verdana, arial; font-size: 1em; background-image: url( background1.gif ); background-repeat: no-repeat; } a img { border: 0; } a, a:link, a:visited, a:hover, a:visited { color: #EC5568; text-decoration: none; } a:focus { outline: none; } a:hover { text-decoration: none; } #container { padding: 10px; } #menu { float: left; width: 20%; opacity: .6; /* All others */ -moz-opacity: .6; /* Gecko browsers */ filter: alpha( Opacity: 50 ); background-color: #666666; text-align: center; } #menu li { display: block; line-height: 200%; list-style-type: none; } #menu a { padding: 5px; padding-right: 80px; padding-left: 80px; background-color: #333333; } #menu a:hover { background-color: #000000; } #menu h2 { text-align: left; padding-left: 15px; font-size: 16px; } #main { margin-left: 1%; padding: 1%; float: right; width: 77%; opacity: .6; /* All others */ -moz-opacity: .6; /* Gecko browsers */ filter: alpha( Opacity: 50 ); background-color: #666666; text-align: justify; } /* ]]> */</style> </head> <body> <div id="container"> <div id="menu"> <h2>asdf</h2> <ul> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </div> <div id="main"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor. Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris. </div> </div> </body> </html> Screen shot for FF. Screen shot for IE7. Any ideas on why this is happening? IE has been going weird when ever I use background images problem solved - it seemed that the inside box was too close to the outer one, so i gave it some padding and the border-line now shows. weird is, that it is now a little bigger than the other element, but i can live with 2px ... for now hi folks, i really dislike IE i make the design for my webstore ... still i only want to use floats (no tables or other positioning) ... i am slowly advancing ... right now i am pretty much stopped in my tracks, because IE does not display the right side of 2 of my boxes (those are very similar in layout). the boxes concerning have an outer DIV and an inner DIV. the outer has a specified width in px and overflow:hidden (which has helped keeping the width). the content is other DIVs and text. note that a similar box with a UL in it does indeed display the thin borderline all the way around ..... and this is what drives me nuts. LINK concerning boxes are the shopping cart on the top right and the mailing list box on the bottom left note that the similar costructed box with the navigational menue in it above the mailinglist box does display the borderline .... oh, and in firefox everything is fine of course on a side note .... in IE; hovering over any hover item results in the bdy text losing its background color?! i am not even challenging that one yet it would be great if someone could help me out here Code: this is for the shopping cart box: #header_right { color: black; font-size: 80%; background-color: white; margin-top: 0.5em; margin-right: 1.5em; padding-left: 10px; width: 150px; height: auto; overflow: hidden; float: right; } #header_right_content { color: #fff; background-color: #f8f2dc; padding-top: 0.5em; padding-bottom: 0.6em; height: auto; border: solid 1px gray; } I applied the following class to the default (selected) <option> tag. Shows up great in Mozilla, doesn't apply in IE. Where I'm I missing the boat? Any tips appreciated. .form {font-weight: normal; font-size: 14px; text-align: center; border-bottom: 1px solid #999999;} I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white. The following is the code I'm using in the body selector.. not much places where something could be going wrong. css Code: Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }
The link to the page is he http://montanlaw.com I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips? Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to. Thanks in advance for any help, chip19 hi i just can't seem to get this problem. i have searched and tried everything. but i don't know what i am doing wrong. the background doesn't repeat in firefox. i want the background -- bg to repeat vertically. instead the content in the para tag overlaps on the footer. here's a short version of the code. Code: <body> <div id='bg'> <div id='banner'> <div id='logout'> <a href='../templates/home.php'>Home</a> <a href='../php/logout.php'>Logout</a> </div> <div id='menupos'> <!-- Menu for the site --> </div><!-- menu --> <p id='clear'> Content of the site </p> </div> <!-- banner --> <div id="footer"></div> </div> <!-- bg --> </body> </html> and following is the css :- Code: body{ font-family: arial, helvetica, sans-serif; color: #000000; margin: 5px; text-align: center; vertical-align: top; } /* site background */ #bg{background: url(../images/bg.jpg) repeat-y; width: 800px; height: 37; margin: 0 auto; /* firefox fix to center align the whole page */ } /* site banner */ #banner{background: url(../images/banner.jpg) no-repeat; width: 800px; height: 492px; } /* site footer */ #footer{background: url(../images/footer.jpg) no-repeat; width: 800px; height: 71px; } /* menu position */ #menupos{padding-top: 20px; padding-left: 40px;} /* Main Menu ul */ /* Remove all space and padding and list style */ #menupos ul{ margin: 0; padding: 0;} /* displays all Main Menu links in one line*/ #menupos ul li{ position: relative; display: inline; float: left; height: 50px; /* needed for menu_img & Sub Menu to render properly */ width:150px; /* Width of Menu Items to render the menu properly */ background: url(../images/menu_img.jpg) no-repeat; } /* Sub Menu ul */ #menupos ul li ul{ display: none; /*Make the sub list items invisible*/ position: absolute; /*when items appear, they come one below the other instead of in one line */ width:150px; /* Width of Sub Menu Items to render the sub menu below the main menu */ left: -1; /* to align right below */ top: 50; /* to align right below */ } /*When hovered, make Sub Menu appear*/ #menupos ul li:hover ul{ display: block; } #menupos ul li ul li{ padding: 5px 0px 5px 0px; /* (Top-Right-Bottom-Left) Sub Menu items padding */ border-top: 1px solid #787878; background: #B3B3B3; text-align: left; height: auto; /* to clear Main Menu height of 50px */ } /* align logout and home to top right of page */ #logout{ margin-left: 735; margin-right: 5; padding-top: 55; text-align: right; } /* to clear floats for para */ #clear{padding-top: 10px; clear: both; font-size: 10pt; color: #C90514; } i want the site background :- /* site background */ #bg{background: url(../images/bg.jpg) repeat-y; to repeat vertically..but it doesn't. thank you Converting a site layout from tables to CSS. The files validate as XHTML 1.0 transitional (html and css files validate), and appear identicle on IE7 and FFox3.5. However, when printing the page, Firefox prints the nav block correctly (page 1, upperleft, as both browsers show onscreen), but IE7 prints this block on page 3 (beside the footer). Same result on different printers, so I presume the factor lies within IE7. Can't seem to find a solution, any help welcome. Page is live at: "foggymountain.com/black-bear-hunting-notables-022410.shtml" Thanks. Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!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>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> Hi There all, I've got this problem with a overflow div tag. I've tried just about everything possible. Easy way of saying it, I want a content box that is basically form 80px of the page down to the bottom of the browser. This "content box will be scrollable, but i want a menu to be the top 80 pixels of the page. EDIT: IE just does the content in the full page! Here's sample here of my small css: Code: <style type='text/css'> #content { top: 75px; bottom: 0px; width: 100%; position: absolute; overflow: auto; } </style> Thanks in advance! James Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it. I hate css http://www.mgan.net/work/10-06-04/layout1.html There is the link, I have my styles in the header section of the html file. Hi - I've just carefully taught myself to design a site in CSS (as you can tell I'm not an expert - please forgive me this!) It looks great in IE, but the CSS doesn't display at all in Firefox. What have I done wrong? My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code. Code: #menu { width: 769px; height: 27px; margin: 0px auto; padding: 5px 0px 5px 0px; background: #000000 url(images/SDCB-menu-bar.gif); } #menu ul { list-style: none; margin: 0; padding: 0; width: 125px; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; text-align: center; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000000 url(images/SDCB-menu-bar.gif); text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li { position: relative; } #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} Here is the HTML. Code: <div id="menu"> <ul> <li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li> </ul> <ul> <li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li> <ul> <li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li> <li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li> </ul> </ul> <ul> <li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li> <ul> <li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li> <li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li> <li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li> </ul> </ul> <ul> <li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li> <ul> <li><a href="http://mysite/index.html" title="History">History</a></li> <li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li> <li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li> <ul> <li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li> <li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li> </ul> <li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li> <li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li> </ul> </ul> <ul> <li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li> <ul> <li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li> <li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li> </ul> </ul> </div> Thank you in advance I am a total CSS newbie...but I am trying to make my page display properly in both IE and firefox... Right now IE is perfect, and firefox displays nothing in the center! http://www.charlotteweddingphotos.com Two CSS files: http://www.charlotteweddingphotos.c...resentation.css http://www.charlotteweddingphotos.c...-box-layout.css I searched the net, and people were talking about clearing, and this and that...let me know if you know what my problem is! Thanks so much in advance! Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. |