|
CSS - Driven Crazy By Safari And Css Lists
How is it that safari is toooooo stupid to recognize the fact that I've specified background images... it also doesn't recognize the display:inline attribute. Are these just things that are unsupported in safari? I can't for the life of me figure out why it's doing this.
Code:
#tabs ul {
padding-left: 0;
margin:0px;
display: inline;.
}
#tabs ul li{
width:170px;
height:25px;
list-style: none;
display: inline;
text-decoration:none;
z-index:1;
}
#tabs ul li a{
height:25px;
background-image: url("../images/mainTab.jpg");
background-repeat: repeat-x;
display: inline;
font-size: 10pt;
color:#fff;
text-decoration:none;
}
#tabs ul li a.selected{
background-image: url("../images/mainTabSelected.jpg");
background-repeat: repeat-x;
color:#000;
}
Similar TutorialsWell I honestly have no idea which forum to stick this in so I'll start here? As the title says I'm trying to make a simple css tab menu, except I'm making it very difficult lol. The problem that I'm having is not only must the tabs be able to expand and contract depending on the content/word inserted, and also if a new category is created it must create another tab. There will always be one tab present labeled home/index/etc., centered in the design. Like this As a new category/page is created/included via php a new tab shows and they stay centerd. Like this This goes on to make a total of six tabs. As of right now I was planning on using these mac style tabs for the tab images but that seems to be whats making this the most diffucult.Especially since I wanted to use a diffrent tab image for the tabs when they are selected. This would be pretty straightforward in a table layout but I'm really trying for a completely css page. I would greatly appreciate any advice if this even sounds possible the way I described, some other way possibly, or if I'm just shooting for a pipedream. Thanks very much in advance. hello im very excited about your whatever:hover script http://www.xs4all.nl/~peterned/csshover.html, but im wondering if there is a way to make the css valid (according to eric meyer in "more eric meyer on css" the behavior spec isnt valid css) instead of feeding ie through the behavior spec in the css file (that doesnt compute in other browsers), how about adding a conditional comment in the html file? im not sure what it would look like (as im no expert) but how about <!-- [if ie]> @import url("csshover.htc") <![endif] -->? or maybe it needs to be some form of <!-- [if ie]> <script type="text/jscript" src="csshover.htc"></script> <![endif] -->? thank you very much rasmus rasmus@samtaleterapi.com www.samtaleterapi.com Thanks for taking the time to read my question. I have an events page for my band. The page is layed out using tables. I'd like to change my pages over to using css. I'm having problems putting things where they need to go. Can someone help? it needs to work for both FireFox and IE Thanks Good Page (tables): www.pierced.ca/pierced-events.htm Messed up Page (css): www.pierced.ca/pierced-eventsWithCSS.htm Hello there I would like to ask you a question concerning pop up menus. It turns out that I have seen some techniques which use just CSS. Nevertheless, what I usually see is techniques that use javascript to achieve this pop up menus. It seems to me that javascript might be a more simple and straightforward technique for this purpose although I do not know because I have not implemented neither of them yet. Since I want to build a pop up menu, I would like to hear your suggestions in terms of advantages and disadvantages of css driven pop up menus against javascript menus. As far as I know, javascript is a disadvantage because it might not work sometimes when it is disabled in the browser. But, tell me your point of view, because I am sure you have lot to say about this. Another thing that I would like to do is defining myself the shape and colors of this pop up menus so please, you can bear in mind this point for any suggestion concerning the previous paragraph. In conclusion, bearing in ming that lot of you will have had some experience working with pop up menus, I would appreciate any sound suggestion about the best or the most standard approach to let me start working on a custom pop up menu. If you there might be other more interesting and useful way of doing these pop up menus that is not css or javascript, please tell me as well. I look forward your replies. Thanks in advance. I have css driven dropdown menus but they disappear when I try to scroll down. Also when they appear they are below the main content in my content box. I'm getting most of this information out of books and online forums. Anybody know anything about this? My Developement Site CSS code I know it isn't pretty yet, but I'm just working on basic layout for now. Resolved! I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all! Here is my website: http://panik.owphosting.com/home.php And here is my css: Code:
body {
margin: 0px;
color: #000;
font-size: 8pt;
font-family: verdana;
height: 100%;
width: 100%;
background: url("images/bg2.jpg");
}
a {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:visited {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:hover {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 700px;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: 2px solid #000;
left: -2px;
background: #FBF2D9;
width: 150px;
}
#rightcontent {
position: absolute;
padding-top: 10px;
padding-right: 2px;
padding-left: 2px;
border-right: 2px solid #000;
right: -2px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 154px;
padding: 10px;
background: #FBF2D9;
width: 375px;
text-align: left;
}
#moduletop {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
text-align: left;
font-size: 8pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
overflow: auto;
}
#modulebottom a {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:visited {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:hover {
color: #99D8FE;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
table#news {
color: #000;
font-size: 10pt;
font-weight: bold;
width: 375px;
margin: 0;
border: 0;
vertical-align: top;
}
table#news div.head{
color: #237CBB;
font-size: 10pt;
width: 375px;
font-weight: bold;
}
table#news div.date{
color: #919191;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.detail{
color: #000;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.foot{
color: #000000;
font-size: 10pt;
font-weight: bold;
margin: 0;
width: 375px;
}
shout{
width: 130px;
overflow: auto;
}
Hi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up. The site is http://www.orchard-homes.co.uk/, has anyone got any ideas? It seems like its been stretched vertically... Thanks! Hi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph please click here to read my message. My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with. Here is my xhtml And here is my css I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly. Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc. Cheers Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example: normal view: nav | content nav | content nav | content footer-------- problem in ie 5.01 Code: | content
| content
| blank
| blank
nav | blank
nav | blank
nav | blank
| blank
| blank
| blank
| blank
footer--------
Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it?? Click Here for My Website CSS code - Code: body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}
/* LAYOUT */
#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */
#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}
/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}
/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}
#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}
#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}
/* Navbar */
#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}
#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}
#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}
#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}
#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}
/* Main content Area */
#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}
#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
/* Height Gap */
.hg {
margin:0 auto;
height:5px;
}
#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}
/* LINK STYLES */
/* Linkpage links */
a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}
a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}
/* Footer links */
a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}
a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}
/* All other links */
a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;
}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}
#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */
.a img {
border: 0;
}
#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}
/* text classes */
.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}
.middletext {
line-height: 14px;
}
.normaltext {
font-size: 12px;
}
.largetext {
font-size: 16px;
}
/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
Please help me CSS gods. I want pure CSS Menus. I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me. URL Blocked Works fine on FF and IE6. IE7 users complain. URL Blocked Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus. I also can't get it centered or the title evenly spaced on any browser. At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages. The CSS is main.css in the respective folders. Ohh well, the forum won't let me give links to my samples. Hi Everybody, I am really struggling here. I came up with a nice layout in photoshop and then marked up the HTML/CSS. Everything looked great until I tested the browser zoom in. On every single browser, the footer background image stops repeating. Here is a screenshot: You can clearly see that the footer just stop repeating. Please look at the css and the html format. I am developing this layout on my PC so I can only attach the code... I can't provide a link to the server. Thanks in advance and here's the CSS: Code: * {
margin: 0;
padding: 0;
}
html, body {
font-family: Helvetica, sans-serif;
background: url(../images/body_bg_2.png) repeat-x top #ffffff;
margin: 0;
font-size: 100%;
height: 100%;
}
img {
border: none;
}
p {
font-size: 1em;
line-height: 1.2em;
margin-bottom: 0.8em;
}
a {
color: #540000;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h1 {
font-size: 1.7em;
letter-spacing: 1px;
margin-bottom: 0.8em;
}
h2 {
font-size: 1.3em;
letter-spacing: 1px;
margin-bottom: 0.8em;
}
h3 {
font-size: 1.2em;
font-style: italic;
letter-spacing: 2px;
color: #5e0d04;
margin-bottom: 0.8em;
}
.clear {
clear: both;
}
div#wrapper {
width:100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
}
div#header {
width: 960px;
margin-left: auto;
margin-right: auto;
}
div#header a {
color: #95ba48;
}
div#logo {
height: 110px;
width: 295px;
float: left;
}
div#header_right {
float: right;
width: 295px;
padding-top: 50px;
text-align: right;
font-size: 1em;
color: #95ba48;
}
#header_right p.header_rss {
margin-left: 35px;
margin-top: 17px;
float:left;
}
#header_right #header_rss {
margin-top: -13px;
}
div#navigation_wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}
div#navigation {
float: left;
width: 700px;
margin-top: -17px;
}
div#search {
float: right;
width: 260px;
text-align: right;
margin-top: -5px;
}
input[type=submit] {
border: none;
padding: 3px;
text-decoration: none;
font-size: 1.2em;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #4A4A4A;
color: #ffffff;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
#searchform #search {
border: 1px solid #999;
background-color: #c3e570;
padding: 3px 2px 2px 0;
height: 23px;
width: 215px;
line-height: 1;
font-size: 1.1em;
letter-spacing: .1em;
vertical-align: top;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover
{
background: black;
cursor: pointer;
}
ul#nav {
width:100%;
list-style: none;
margin: 0px 0 0 0px;
background: url(../images/nav_bg.png) repeat-x top;
}
ul#nav li {
display: block;
float: left;
margin-top: 15px;
}
ul#nav li a {
text-decoration: none;
font-size: 1.3em;
font-family: Helvetica, sans-serif;/*, Verdana, Geneva, Helvetica, sans-serif;*/
color: #4a4a4a;/*#9f9f9f;*/
border-right: 1px solid #ccc;
padding: 7px 15px 7px 15px;
}
ul#nav li a:hover {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#index li.index a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#network_sites li.network_sites a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#recent_tutorials li.recent_tutorials a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#about_us li.about_us a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#contact_us li.contact_us a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
div#content {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-bottom: 100px;
overflow:auto;
}
div#left_column {
float: left;
width: 600px;
}
div#right_column {
float: right;
width: 330px;
margin-left: 30px;
text-align: right;
}
div#footer_wrapper {
background: url(../images/footer_bg.png) repeat-x #dcdcdc;
width: 100%;
position: absolute;
margin-top: -100px; /* negative value of footer height */
height: 100px; /*still needs to be changed as things are added on to the footer*/
clear:both;
}
div#footer {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-top: 35px;
}
div#footer_left {
float:left;
text-align: left;
font-size: 0.9em;
}
div#footer_left p.copyright {
margin-top: 10px;
}
#footer_right p.footer_rss {
margin-top: 20px;
padding-right: 55px;
}
div#footer_right #footer_rss {
margin-top: -50px;
}
div#footer_right {
float:right;
text-align: right;
font-size: 0.9em;
}
div#footer a {
color: #272727;
}
Here's the HTML: Code: <?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8"/>
<title>PSD_Slice</title>
<link rel=StyleSheet href="style/style.css" type="text/css" media="screen, print" charset = "utf-8" />
<link rel=StyleSheet href="style/search.css" type="text/css" media="screen, print" charset = "utf-8" />
</head>
<body id="<?php echo $view; ?>">
<div id="wrapper">
<div id="header">
<div id="logo">
<span><a href="/" title="Go to homepage"><img src="images/logo_test.png" alt="Wishlistr" /></a></span>
</div>
<div id="header_right">
<p class="header_rss">
<a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
RSS Feed By Feed burner
</a>
</p>
<div id="header_rss">
<a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
<img src="images/rss_green.png" alt="Subscribe to Tuts4.me Feed" />
</a>
</div>
</div>
<div class="clear"></div>
</div>
<div id="navigation_wrapper">
<div id="navigation">
<ul id="nav">
<li class="index"><a href="index.php" title="Return home" target="_top">Home</a></li>
<li class="network_sites"><a href="network_sites.php" title="Network Sites" target="_top">Network Sites</a></li>
</ul>
</div><!--#navigation-->
<div id="search">
<form action="page.html" method="post" name="search" id="searchform">
<div>
<input type="text" name="search" id="search" value ="Search..." onfocus="if(this.value=='Search...'){this.value=''};" onblur="if(this.value==''){this.value='Search...'};" />
<input type="submit" value="Go" alt="Search all tutorials" />
</div>
</form>
</div><!--#navigation-->
<div class="clear"></div>
</div><!--#navigation_wrapper-->
<div id="content">
<div id="left_column">
<h1>Title of documents</h1>
</div><!--left_column-->
<div id="right_column">
<h2>Right Column</h2>
<br />
<h3>More Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisl lacus, iaculis id dignissim quis, dapibus eu lacus. Nam nec nunc at diam lobortis bibendum eget nec nibh. Duis accumsan sapien nec felis convallis sit amet pharetra urna sodales. Nam nec arcu nibh. Praesent id semper nisl. Integer luctus venenatis tempus. Morbi consequat, massa a egestas tempor, urna tortor gravida lectus, ac interdum diam nunc nec diam. Duis suscipit pulvinar ipsum ut iaculis. Nullam dapibus egestas leo a sodales. Sed metus metus, luctus consectetur sagittis sit amet, laoreet et purus. Praesent lacinia dapibus ligula, et condimentum nibh facilisis vel. Duis condimentum imperdiet elit, vel interdum ipsum tristique quis. Sed sit amet lorem scelerisque nunc ultricies scelerisque nec rutrum lectus. Morbi erat risus, rutrum eu semper ut, pretium a tellus. Phasellus ultricies facilisis mi a euismod. Maecenas dapibus ante non sapien aliquam pellentesque ornare turpis vulputate. Nullam sit amet condimentum odio. Cras ut tempor est.</p>
</div><!--right_column-->
<div class="clear"></div>
</div><!--content-->
</div><!--#wrapper-->
<div id="footer_wrapper">
<div id="footer">
<div id="footer_left">
</div>
<div id="footer_right">
<p class="footer_rss">
</p>
<div id="footer_rss">
</div>
</div>
</div><!--#footer-->
</div><!--#footer_wrapper-->
</body>
</html>
Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance |
|||||||