|
CSS - A Couple Of Css Issues Making Me Scratch My Head
Ok, I am having some issues on the width of my body (I think). It displays correctly on normal size screens but on my imac there is dead space to the right.
There is also two link buttons that have a picture above and below it and for some reason that makes it not clickable. I have tried the overflow:hidden option and that doesn't seem to do anything. I have attached a pic below so that you can see what I am talking about. Not sure what is going on here but if you have a minute to make some suggestions I would be very grateful! Here is my CSS. Please let me know if you see anything obvious here. body{ margin:auto; padding:0; background:#000 url(images/headBg11.png) repeat; width: 100%; } #b_Head{ width:100%; height:150px; margin:0px; padding:0px; background:url(images/headBg.gif) repeat-x; } #bg_Head{ width:934px; height:315px; margin:0 auto; padding:0px; } #logo{ width:235px; height:53px; margin:75px 0 0 110px; padding:0px; float:left; color: #fff; font-size: 46px; position: absolute; } #logo span{ font-family:Tahoma; font-size:58px; color:#297f50; font-weight:bold; line-height:50px; margin:0px; padding:0px; } #banner{ width:450px; height:156px; margin:20px 0 0 7px; padding:0; float:left; background:url(images/banner.png) no-repeat; position: absolute; color: #fff; } #b_Wrap{ width:934px; margin:auto; padding:0; background:#fff url(images/page.gif) repeat; height: 900px; } #content{ width:100%; margin:0 auto; padding:33px 0 0px 0; } .borderLeft { width:5px; height:862px; padding:0; float:left; background:url(images/bborder.png) repeat-y; } .borderRight { width:5px; height:862px; padding:0; float:right; background:url(images/bborder.png) repeat-y; } #rigtPanel{ width:218px; margin:30px 0 0 0; padding:0 0 0 10px; float:left; margin-top: 40px; } #rigtPanel .services{ width:218px; margin:0px; padding:0px; float:left} #rigtPanel .services ul li a{ width:55px !important; height:16px; margin:25px 0 0 0; /* [disabled]margin-left:5px; */ padding:0px; float:right; font-family:Arial; font-size:10px; color:#000000; line-height:14px; text-align:center; text-decoration:none; border:#bdbcbd solid 1px; background:#FFFFFF; /* [disabled]overflow: hidden; */ } #rigtPanel .services ul li a:hover{ text-decoration:none; /* [disabled]background: #cccccc; */ } #rigtPanel .services ul li .author{ width:130px; height:21px; margin:-25px 0 10px 0; padding:0px 0 0 32px; float:left; font-family:Arial; font-size:11px; color:#343434; line-height:20px; background:url(images/author.jpg) no-repeat 10px 0; } #rigtPanel .borderBottom { width:177px; height:21px; margin:-5px 0 0 0px; padding:5px 0 0 40px; float:left; background:url(images/border.png) no-repeat; } #rigtPanel .borderTop { width:177px; height:21px; margin:-25px 0 0 0px; padding:10px 0 0 40px; float:left; background:url(images/border.png) no-repeat; } #rigtPanel .services ul li .author span{font-weight:bold} Similar TutorialsOn this page: http://www.mediamogulsweb.com/. I'm having a few minor issues. 1) In IE7, something is wrong with this code: Quote: #blurbs { background:52% 48% url(plus_design.jpg) no-repeat; width:615px; height:481px; margin:13px 0 10px 0; border:1px solid #000; } You'll see what I mean when you look....the 1px border is only there to illustrate the problem...it should look like it does in IE6 or Mozilla... 2) In IE6, there is some extra padding or something for these styles: Quote: #bot_left_text_box2 { width:78px; height:81px; margin:0; border:1px solid #000; } #bot_right_text_box2 { width:78px; height:81px; margin:10px 0 0 0; border:1px solid #000; } Again, you'll see it when you look... Any help is appreciated...I can;t seem to find the problem, and I'm too tired too stare at it any longer...so maybe one of you can help...thanks. Hi Everyone I am having some CSS issues with the rotator in my website in a couple Apple products. iPad 1 3.2.2 and iPhone 4.0.5. I am having trouble fixing it. I was wondering if anyone had any ideas. Please visit the following URL to see the images of the failed Apple products. http://www.webskillsplus.com/apple.html The following is a link to the website page with the issue http://www.discovermassagespa.com/index.html You can see the CSS at the following URLs http://www.discovermassagespa.com/wt-rotator.css http://www.discovermassagespa.com/css/massage.css Thanks in advance for your help. First: I have seen: p.classname and just .classname What is the difference between the two if the latter is applied to a paragraph? Also: I have seen classes stack on top of each other like: <p class ="classname" class ="classname2">text</p> <p class = "classname" id = "idname">text</p> So is there a way to use classes with other classes id with other ids or classes and ids together like the above? Here is my css code:
Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
#sidebar {
float:left;
width:140px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
padding-right: 10px;
margin: 10px 10px 10px 0px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sidebar a:link, #sidebar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sidebar a:hover, #sidebar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sidebar ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
Here is my html code: Code: <body>
<div id="page">
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span></div>
<div id="topbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/about_us/about_us.html">About Us</a></li>
<li><a href="/other_regions.html">Other Regions</a></li>
</ul>
</div>
<div id="sidebar">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Contact Us/Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
</div>
</body>
If it is more helpful - This is a link to the actual html file to view I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design. Ignore the search part - that is phase 2 so I am not messing with that at this point. Here are the problems I am trying to correct: 1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space. I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference. 2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge. In IE they are indented way too much. As always any help is greatly appreciated. Thanks! Hey all, I'm hoping someone can help me! Basically i've been setting up this website (using e107) and the theme I am using isn't exactly what I want, there are a few pages that don't quiet work. Anyway I have tried to modify this and I have just been unsuccessful, I did manage to do a little bit but just reverted back as the chances were it wasn't right!! All I need is to remove 2 areas of the page and make the center piece fill the page. If you think you can help me reply here and ill talk to you either via IM or PM as I will have to give you login details and URLs etc Thanks, Ben Ok If you go to: http://www.zahra-zahra.com/innerPage.html if you hover over the side menu (sub/subcontact)which are supposed to be nested lists.. you will see some alignment issue with the pink and the brown-ish.. also the nested list was moved a bit forward so i added margin:-0.5em; but IE doesnt like it and has moved the li further back.. relevant code: PHP Code: #sideMenu { margin-top:0.2em; float:left; clear:left; width:24%; } #sideMenu ul { float:left; width:100%; list-style:none; margin:0em; padding:0em; } #sideMenu li { clear:left; background-image:url(images/site/backgrounds/sideLi.jpg); padding:0.4em; margin-bottom:0.1em; } #sideMenu ul li ul { margin:-0.5em; padding:0em; margin-top:0.3em; padding-top:0.2em; padding-bottom:0.2em; } #sideMenu ul li ul li { width:100%; background-image:url(images/site/backgrounds/sideLiLi.jpg); } #sideMenu a { text-indent:0em; text-decoration:none; color:#663333; margin-left:0em; font-size:1em; } .nestedList a { text-indent:0em; padding:0.3em; padding-left:3em; } .nestedList a:hover { background-image:url(images/site/backgrounds/sideLiLiHover.jpg); background-position: -0.4em 0em; } HTML PHP Code: <div id="sideMenu"> <ul> <li><a href="">Contact</a> <ul class="nestedList"> <li><a href="">sub</a></li> <li><a href="">SUBcontact</a></li> </ul> </li> <li><a href="">Return</a></li> <li><a href="">News</a></li> <li><a href="">FAQ</a></li> <li><a href="">bout us</a></li> <li><a href="">Home</a></li> </ul> </div> just a side question i have in the above code a nested class.. why cant i do something like .nestedList ul { } i tried that but it didnt work... Two issues I could use some help on, if anyone is willing to assist: One: I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win). Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div. The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line. This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer). But in IE 6, I noticed a gap at the bottom of the page even with 0 margin. I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not. Two: Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether. Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick. If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof Here's the code: Click here to see the template. Click here for CSS. Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP -- Aiden Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it. Or can it be within the body tag? What is the standard? TIA Hello, I am hoping someone can help me. I've tried googling this and am not finding anything that helps or makes sense. I'm still relatively new to CSS. Anyway, here's my issue: I have a jquery navigation and have a style for the list in my <head> section. On one of my pages, I want to have a regular, vertical, bulleted list but something isn't letting it be vertical. I *think* it's the <head> style but I'm not sure. Would someone please have a look? Here's the HTML: [code] <script type="text/javascript" src="js/font_size.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!-- navigation code adapted from code --> <script type="text/javascript" src="js/jquery.bgpos.js"></script> <style type="text/css"> ul {list-style:none;margin:0;padding:0;} li {float:left;width:110px;margin:2px;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#580d0a;text-decoration:none;border-right:2px solid #847f2e;border-bottom:2px solid #847f2e;} li a:hover, li a:focus, li a:active {background-position:-150px 0; color: #ebce72;} #nav a {background:linktomy(img/nav_bar.png) repeat 0 0;} </style> <script type="text/javascript"> $(function(){ $('#nav a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="primary_container"> <div id="logo"> <a href="index.html"><img border="0" src="img/3hearts.png" alt="Heart Homes Tucson" /></a> </div> <div id="nav_bar"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a class="nav-on" href=""><strong>Services & Locations</strong></a></li> <li><a href="">Faithful Heart Home</a></li> <li><a href="">Loving Heart Home</a></li> <li><a href="">Young at Heart Home</a></li> </ul> </div> <div id="text_container2"> <h1> Services</h1> Tucson Heart Homes believes that everyone deserves the best care which is why our many services include: <ul top="-10px" left= "20px" list-style="disc" display="list-item"> <li>3 home-cooked and nutritious meals, as well as snacks, daily</li><br /> <li>24-hour State Certified Caregivers</li> <li>Fun daily activities designed to meet residence needs</li> <li>Personallized care plans by our Registerd Nurse</li> [code] .... etc I've tried creating a separate div in my CSS, I've tried putting the settings in here, nothing is working.... The CSS I have for the nav is: [code] div#nav_bar{ position: absolute; top: 125px; left: 5px; } ul#nav{ display: block; width: 150px; padding: 5px 18px; margin: 5px; margin-bottom: 5px; } [code] Any help is greatly appreciated! This is my final project for a class and this is the LAST thing not working. Thank you! SMCorning I'm trying to figure out why part of the image on a website I'm working on isn't fully showing. Here is the reference url: URL Look on the right hand side of the "Who Are You?" green box and you will see that the black drop shadow is missing in this section. It's actually there, but has slid under one of the other images. I've tried to figure out how to get it back without messing everything up but cant. Please advise. Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics. Anyway, as such I need to find out a few things I know but don't know if you know what I mean. Where can I find out the official definitions of CSS operators... * html for example..what the * does. class1>class2...what the > does...stuff like that. Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks I was just wondering if there was a standard that most people use. Or do you just use each as the circumstances require? How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th> [html] <thead> <tr> <th scope="col" class="twentyfive">STATUS</th> <th scope="col" class="twentyfive">VIEW</th> <th scope="col" class="twentyfive">DOWNLOAD</th> <th scope="col" class="twentyfive">TOTAL</th> </tr> </thead>[/html] Do I need to add something like this? [css] table.main thead tr th.twentyfive { /*border: 1px solid #fff;*/ width: 25%; } table.main thead tr th.twentyfive.right { /*border: 1px solid #fff;*/ width: 25%; float: right; }[/css] i have this site here and am looking for a solution to my css for resizing the window i need the .swf to appear underneath the main content box. any ideas?! i need to it to behave exactly like the .jpg on this page here anyone!? Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well http://m2-klan.com/nuked.html How would I go about making this page all Css/div? My friend has been saying something that I can make that from all Css with less graphics, how would I go about doing that? I am a newbie at Css and I would like to know how to do that, instead of tables. |
|||||||