|
CSS - Some Layout Problems Moving From Tables To Css
This was formerly another post. Making progress and almost there.
I have a website under develepoment... My site I have 4 problems. 1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter. 2. The banner image and gutter images seem to move over to the right by 1px in both browsers. 3. How do i get the left container div to go all the way down the page. 4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div. any help would be appreciated... Similar TutorialsHi - I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout. Can all designs be rendered with div's instead of tables? I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs... Thanks I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<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">Customer 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>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: 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;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
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;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. I'm using what seems to be called a "liquid two column" CSS layout. Its a main column of 100% width left padding the width of the side bar. In the main column, I need to use table, but I'm stumpt on how to insure it doesn't extend beyond the right edge of the main column div. Can this be done? Since the side column is 200px, the main column has a left margin of 200px. So this means a table with a width of 100% actually extends 200px past the right edge of the main column. Playing with the right margin of the table seems to be the right direction, but just not sure how to make the table fill the space right, and work the same in bot FF and IE. Any ideas? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{
float: left;
width: 250px;
margin: 0;
padding: .5em;
}
#content
{
margin-left: 250px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#leftnav p { margin: 0 0 1em 0; }
.testTable {
border: 1px solid gray;
margin-right: -283;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="leftnav">
<p>
Side Column
</p>
</div>
<div id="content">
Stuff Here
</p>
<table class="testTable"><tr><td>eeee</td></tr></table>
<p>
Stuff Here
</p>
</div>
</div>
</body>
</html>
[edit] The purpose of the table will be to display row data from a DB. I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? So I've decided to go the 'pure css' route other than my tables for tabular database content. I had most of the 'positioning' finalized when I ran into a huge trouble . . . how to make a border image repeat and place it properly. After getting frustrated with the border, I decided to use one simple table just to get the borders correct. Everything was fine there even though I didn't want to give in to the table temptation. That is until I tried to add my suckerfish dropdown and have it centered. So now I'm stuck. My site is turning into a table based site and I'm really annoyed that I can't fix it myself. I've had trouble with coding before, but I always manage to fix it myself. Can somebody please point me in the right direction? I've been searching these forums and the web for 2 days and not a single example can be fine tuned into my solution. [edit] p.s. I know the css and html is a mess right now. I'm going to clean it all up once I get something working =/ http://www.mytreetv.com/showcase/index.php css Thank god I'm doing this site for free as a favor to a friend of the family instead of a paying job. Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me. I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc. I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div. Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here. I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help. My current (broken) home page can be accessed via: "dgringo.homeip.net/~dgringo/index.shtml" Here is the code and the CSS file: <head> <title>...</title> <script language="JavaScript" type="text/javascript" src="main.js"></script> <link rel="stylesheet" href="entry.css" type="text/css" /> </head> <body> <h1>Me (iMac's) Web-space</h1> <div id="prelude"> <!--#include virtual="includes/header.incl" --> </div> <table id="main"> <tr> <td id="menu"> <!--#include virtual="includes/menu.incl" --> </td> <td id="content"> <!--#include virtual="includes/body.incl" --> </td> <td id="topics"> <p> <!--#include virtual="includes/topic1.incl" --> </p> <p> <!--#include virtual="includes/topic2.incl" --> </p> </td> </tr> </table> <div id="footer"> <!--#include virtual="includes/footer.incl" --> </div> <div class="adendeum"> Last updated <!--#echo var="LAST_MODIFIED" --><br /> </div> </body> </html> ------------- The CSS file now follows: a:link {text-decoration:none;color: black;} a:visited {text-decoration:none;color: black;} a {color: black;} a:hover {text-decoration:underline;color: silver;} body { color: #000000; background: #669999; } h1 { text-align: center; } #prelude { width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; text-align: center; } #main { display: block; width: 100%; border: silver dotted; height: 16em; } #main td { border: dashed; } #menu { position: absolute; width: 20%; left: 2%; } #content { position: absolute; left: 23%; width: 50%; } #topics { position: absolute; left: 74%; width: 20%; } p:first-line { color: gray; background-color: green; } #footer { text-align: center; width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 10px; } .adendeum { font-weight: lighter; color: gray; text-align: center; } I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert. Here is the code so far: <div position="float: left"> <span class="contentHeader">Direct Basics</span><br> <p><span class="h2"> Access Direct</span> </p> <p><span class="livetext">To access Direct: </span></P> <span class="livetext"> <ol> <li>On the Portal home page, you can either:<br> <p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise Direct</b> </p> <p style="text-indent: 10em;"> or<br> <p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b> menu to select <b>Assetwise Direct</b><br> </li> </ol> </span> <p class="SmallText"> <span class="livetext"> <ol start="2"> <li>When the security screen appears, enter your...<br> <p style="text-indent: 3em;"> user name <p style="text-indent: 4em;"> and password<br> <p style="text-indent: 5em;"> and click <b>OK</b><br> <br> Note: The user name and password fields are case sensitive.</li> </ol></span> </p> </div> <div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg"> <img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br> <div style="text-align=center;"> <span class=reporttext> <a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg"> <img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br> <div style="text-align=center"><span class=reporttext> <a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <p class=livetext style="position: absolute; float: left; left: 515px; top: 500px"> <a href="#" onClick="window.history.back(); return false;">Back</a> </p> THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), a i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that? Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables? Any help would be greatly appreciated. Hey everyone, first time poster here as I just found this site. Hope someone can help me fix my css problems I'm having on the site. http://intlops.orbisblue.com/testing2/ What I'm looking to do is to have the IOPS logo sitting just ontop of the content box centered. Then the two pictures, Americas and Africa within the content box spaced evenly side by side with the text below them that is bulleted. Any help / tips/ corrections would be greatly useful and appreciated. Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>International Operational Protection Services</title> <link rel="stylesheet" href="styles.css" type="text/css" media="all" /> </head> <body> <div id="floater"></div> <div id="centered"> <div id="content"> <img src="logoFullWhiteSmall.png" /> <div id="left"> <img src="americas.png" /> <ul> <li>Critical Infrastructure Program (CIP)</li> <li>Maritime Security Consulting</li> <li>Training</li> </ul> </div> <div id="right"> <img src="africa.png" /> <ul> <li>Anti-Piracy / Maritime Security</li> <li>Coastal Patrol</li> <li>Training</li> </ul> </div> </div> </div> <div id="bottom"> <p> 2011 C International Operational Protection Services </p> </div> </body> </html> Code:
html, body {
margin:0; padding:0;
height:100%;
}
body {
background:url('page_bg.jpg') 50% 50% no-repeat #4a4a4a;
font-family:Georgia, Times, serifs;
color: #FFF;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-250px;
width:1px;
}
#centered {
position:relative; clear:left;
height:500px; width:80%; max-width:800px; min-width:400px;
margin:0 auto;
background:url('SiteSelectorMap.png') no-repeat #4a4a4a;
border:1px solid #e9ab59;
-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}
#bottom {
position:absolute;
bottom:0; right:0;
}
#content {
position:absolute; left:0; right:0; top:0; bottom:0;
overflow:auto; height:460px;
padding:10px; margin:10px;
display:block;
margin-left: auto;
margin-right: auto;
}
#bottom {
padding:10px;
font-size:0.7em;
color:#666;
}
#left {
width:200px;
float:left;
padding-left:5px;
}
#right {
width:400px;
float:right;
padding-left:5px;
}
This may be a wordpress issue or it may be an issue with my coding that I've modified in my css/settings for the theme, but I can't get the site to display consistently across all three major browsers (Firefox, IE, Chrome). My site: www(.)cinemasight(.)com For some reason, Firefox is adding a margin (20px maybe?) to the "Content" div. This isn't present in IE and Chrime is adding an image to the background of the "Content" div that isn't present in any of the CSS that I can find. Similarly, in the upper right hand section, with the Facebook, RSS and Twitter links, the Google Search bar is displaying entirely differently on all three browsers. Code posted below: Resolved. Mods please delete! Thanks. Resolved. hey guys, I am learning how to design a website right now, and to get started I take layouts that still exists and replacet them. I want to create a layout such such as that: http://www.girlfriendnyc.com My code looks like that Code: #global {
background: none repeat ,#262626;
display: block;
height: 99px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#global .nav-wrapper {
background-color: #222222;
height: 99px;
margin: auto;
width: 1200px;
}
Code: <html> <head> <link rel="stylesheet" type="text/css" href="anna.css" /> </head> <body> <div id="global"> <div class="nav-wrapper"> <ul> <li> <h2> Contact us </h2> </li> <li> <h2> Follow us </h2> </li> <li> <h2> Read our blog </h2> </li> </ul> <ul> <li> <h2> Learn about us </h2> </li> <li> <h2> See our portfolio</h2> </li> </ul> </div> </div> <body> </html> My Problem is why do these 2 Boxes do not fit together? greetings and thx in advance This picture((URL address blocked: See forum rules) ) will show you the page layout at the moment, Here you can see a lot of lines in paint i did. Edit2: The picture damaged page formatting so here it is: img206.imageshack.us/img206/107/57260190dy8.png The Pink lines are what i ideally want to happen, however, my "posts" are overlapping into my right hand navigations (the red dotted lines). I fixed this with a z-index for now but i really need a solution to this Id prefer it if i had some kind of Div tag which Held the two content areas seperate (as posts will wrap around the navigations) this is displayed in the orange boxes. If anyone could offer some help id greatly appreciate it its just annoying me .... and ive only just learnt CSS layouts so i can only fix so much Code was a bit long, but as i cant Link to it for some reason ill spam it he Code:
body{
background-color: #1c1c1c;
padding: 0; margin:0;
color: #A2E700;
}
#topBar{
height:50px;
background-color: #666666;
color: #A2E700;
overflow: hidden;
border-bottom: 5px solid #B4E67F;
background-image: url(topBarBG.png);
}
.topNav{
margin: 0; padding: 0;
height: 100%;
background-color: #666666; float: left;
}
.topNav img{width: 20px; height: 20px; text-align: center; border: 0; margin: 0;}
.topNav li a{
float: left; color: #FFFFFF;
padding: 0px 10px 0px 10px;
text-align: center;
border-top: 5px solid #EEEEEE;
height: 100%;
text-decoration: none;
border-right: 1px solid #EEEEEE;
background-color: #90D900;
}
.topNav li{display: inline;}
.topNav li a:hover{
background-color: #B4E67F;
}
#IntroBox{
width: 100%;
height: 200px;
background-color: #EEEEEE;
border-bottom: 2px solid #B4E67F;
}
.IntroHeader{position: absolute; text-indent: 150px; top:85px; font:normal 400% georgia,Verdana,Arial,Sans-serif;}
#contentArea{
width: 100%;
}
#rightIntro{
float:right;
width: 380px;
height: 100%;
background: url(needles.jpg);
border-width: 0px 0px 0px 5px;
border-color: #B4E67F;
border-style: solid;
position: relative;
}
#leftIntro{color: #90D900;}
#content{position: relative;}
#MenuRR, #MenuRL{
z-index: 2;
position: relative;
float:right;
width: 190px;
height:250px;
border-width: 0px 0px 5px 1px;
border-color: #B4E67F;
border-style: solid;
text-align: center;
}
#MenuRL{background-color: #EEEEEE;}
#MenuRR{background-color: #EEEEEE;}
#MenuRR img{padding: 5px 0px;}
#MenuRL ul {
list-style: none;
border:0; padding:0; margin:0;
}
#MenuRL li {
margin: 0;
}
#MenuRL li a {
display: block; padding: 0 5 0 0;
background-color: #B4E67F;
text-decoration: none;
color: #666666;
border-bottom: 1px dashed #90D900;
font: normal 75% georgia,Verdana,Arial,Sans-serif;
width: 190px; height: 20px;
text-align: center;
}
#MenuRL li a:hover{
background-color: #90D900; letter-spacing: 4px;
}
#MenuRL h4, #MenuRR h4{text-align: center; color: #EEEEEE; background-color: #666666; width: 100%; padding:0; margin: 0;}
.post{z-index: 1; border-bottom: 1px dashed #CCCCCC; position:relative;}
.post h3 {
margin: 0; padding:0;
color: #A7B78D;
font: 24pt fantasy;
}
.postContent{color:#A2E700;}
.postInfo{padding: 0; margin:0;color: #336699; top:-15px; left:10px; position:relative; font: 75% georgia;}
#footer{clear:both; width: 100% height: 25px; background-color: #666666; text-align:center; color: #CCCCCC;}
and HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" title="main" href="style.css" /> <link rel="alternate stylesheet" type="text/css" href="alternate.css" title="other" /> <title>test Page 2</title> </head> <body> <div id="topBar"> <ul class="topNav"> <li><a href="#"><img src="home.png"/><br>Home</a></li> <li><a href="#"><img src="about.png"/><br>About</a></li> <li><a href="#"><img src="email.png"/><br>Contact Us</a></li> </ul> </div> <div id="IntroBox"> <div id="rightIntro"> </div> <div id="leftIntro"> <!-- next tables in here (in div form ;))--> <span class="IntroHeader">Welcome!</span> <img src="laptop.png" />To the portfolio for XXXXXXXXX, A Bsc Computing student at Portmouth. </div> </div> <!--END ALL TOP STUFF - ABOVE = INTRO, BELOW = Content--> <div id="contentArea"> <div id="MenuRR"> <h4 class="navTitle">:: Linkpad ::</h4> <a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=219"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2b80x15.gif"/></a> <br /><img src="w3c_xhtml11_valid.gif" /> <h4 class="navTitle">:: Poll Booth ::</h4> Stuff </div> <div id="MenuRL"> <h4 class="navTitle">:: Navigation :: </h4> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="content"> <div class="post"> <h3>Automated, Anyone?</h3><span class="postInfo">Posted By: Rich on 01/12/07 in Category: General</span> <div class="postContent"> Welcome to the first proper post on my portfolio, this system will all be automated through a php and SQL backend. At the moment this text is just a placeholder for whats to come. As are half the ****ty graphics that are yet to be replaced! </div> </div> <div class="post"> <h3>Random</h3><span class="postInfo">Posted By: Rich on 29/11/07 in Category: General</span> <div class="postContent"> Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah! <br> <br> lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo <br><br> </div> </div> </div> <div id="footer"> <img src="info.png" />Design by XXXXXXXXXXX. Optimized for 1024 x 768 or above resolutions operating in 32bit colour and above. </div> </body> </html> Footnotes: it's not 100% valid XHTML, and i know this... but from experience i know it doesnt have to be 100% valid for the CSS to work fully... as long as its Hi there I have done my first CSS based design, it has bassed w3c validation both for the html and css. It looks exactly how I want in firefox, but in IE7 it is all messed up. I would be really grateful if someone could take a look and let me know where I am going wrong. There are two issues in IE7 1. Content seems to go under the footer and lose the correct background. 2. Horizontal navigation menu button look weird. You can view the page at 82(dot)147(dot)22(dot)10/~ifasouth/ as I have not redireceted DNS yet Can anyone tell me why www.thecharliepoweragency.com wont auto stretch in firefox, it also has layout problems in ie5mac and safari. Hello. I am 2 problems with my site. In firefox everything is ok in IE6 & IE 7 is is broken. Here are the problems. 1. The search bar. It should look like this(Firefox): URL But in IE it looks like this: URL The HTML code is: Code: <div class="search_menu_banner">
<div class="search_background">
<div class="searchname">Search</div>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="searchbox">
<label>
</form>
<input type="text" class="searchtextbox" name="s" id="searchtextbox" />
</label>
</div>
<div class="searchbox">
<input type="image" style="float: left; display:inline; position:relative;" src="<?php bloginfo('template_url'); ?>/images/go.png" alt="Search" />
</form>
</div>
And the CSS: Code:
.search_menu_banner {
margin: 0px;
padding: 0px;
float: left;
height: 38px;
width: 1004px;
}
.search_background {
background-image: url(images/search.png);
background-repeat: no-repeat;
padding: 0px;
float: left;
height: 38px;
width: 363px;
margin-top: 0px;
margin-right: 74px;
margin-bottom: 0px;
margin-left: 25px;
}
.searchname {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #9a2500;
text-decoration: none;
float: left;
height: 20px;
padding-top: 12px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 50px;
margin: 0px;
}
.searchtextbox {
font-family: Arial;
font-size: 12px;
font-weight: normal;
color: #333333;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
height: 19px;
width: 200px;
border: 1px solid #CCCCCC;
}
.searchtextbox:hover {
font-family: Arial;
font-size: 12px;
font-weight: normal;
color: #333333;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
height: 19px;
width: 200px;
border: 1px solid #999999;
}
#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.searchbox {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #9a2500;
text-decoration: none;
float: left;
height: 20px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
}
And the second problem involves multiple column lists. In FF it looks like this: URL But in IE it only shows the last column: URL The HTML for these is: Code: <ul> <li class="col1"><b>Ale Noastre</b></li> <li class="col1"><a href="http://viatadestudent.com/category/video/">Video</a></li> <li class="col1"><a href="http://viatadestudent.com/category/poze/">Poze</a></li> <li class="col1"><a href="http://viatadestudent.com/category/articole/">Articole</a></li> <li class="col1"><a href="http://viatadestudent.com/upload-2/">Upload</a></li> <li class="col2 coltopper"><b>Compania</b></li> <li class="col2"><a href="http://viatadestudent.com/despre-noi/">Despre Noi</a></li> <li class="col2"><a href="#">Advertising</a></li> <li class="col2"><a href="#">Termeni</a></li> <li class="col2"><a href="http://viatadestudent.com/contact/">Contact</a></li> <li class="col3 coltopper"><b>Mai Multe</b></li> <li class="col3"><a href="#">Concurs</a></li> <li class="col3"><a href="#">Anunturi</a></li> <li class="col3"><a href="http://feeds.feedburner.com/vds" target="_blank">Abonament</a></li> <li class="col3"><a href="#">Evenimente</a></li> <li class="col4 coltopper"><b>Coloana4</b></li> <li class="col4"><a href="#">In Curand</a></li> <li class="col4"><a href="#">In Curand</a></li> <li class="col4"><a href="#">In Curand</a></li> <li class="col4"><a href="#">In Curand</a></li> <li class="col5 coltopper"><b>Prieteni</b></li> <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li> <li class="col5"><a href="http://www.wnmag.net/" target="_blank">Web News Magazine</a></li> <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li> <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li> <li class="col6 coltopper"><b>Parteneri</b></li> <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li> <li class="col6"><a href="http://www.tecvortex.com/" target="_blank">TecVortex</a></li> <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li> <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li> </ul> And the CSS: Code:
#footer ul {
padding: 0px 0px 0px 0px;
font-size: 11px;
list-style: none;
}
#footer li {
line-height: 1.3em;
margin: 0px;
padding: 0px 0px 0px 0px;
background-repeat: no-repeat;
list-style: none;
}
#footer li.reset
{
margin-top: -6.5em;
}
#footer html ul li
{
position: relative;
}
#footer li.col1 {margin-left: -35em;}
#footer li.col2 {margin-left: -20em;}
#footer li.col3 {margin-left: -5em;}
#footer li.col4 {margin-left: 10em;}
#footer li.col5 {margin-left: 25em;}
#footer li.col6 {margin-left: 40em;}
#footer li.coltopper {margin-top: -6.5em;}
#footer li.a {
color: #FFFFFF;
text-decoration: none;
}
#footer li.a:visited {
color: #FFFFFF;
text-decoration: none;
}
#footer li.a:hover {
text-decoration: underline;
}
Yo ucan see the problems on the site: http://www.viatadestudent.com Please help. Thanks ok i have a problem, i have the layout working as i want perfectly in IE and it looks good :P but it does not work at all in firefox, im a complete newb when it comes to css, havn't' done much work with it at all :P heres my site, it has waht i have so far up on it for you guys to have a look to see waht the problem is www.zombies-ate-my-brain.com heres the jist of it URL all my images on the site are all backgrounds to the css divs, all the content is in its own div and i will be ontop of all the images, but im trying to get it, that as i add more content in teh content div the div with the bar addon bit will just keep repeating, if that makes sence, if you look on my site using IE you will see it works, but if you look using firefox you see it wont, lemme post my code for you.. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zombies-Ate-My-Brain.com - Brainless Since 1993</title>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" title="styles" />
</head>
<body>
<div id="content_layout">
<div id="texttop">
This Site is a high bandwidth site, Fast connection required.<br/>
This site is best viewed at 1024x768.</div>
<div id="title">
</div>
<div id="bg_interface_top">
</div>
<div id="bg_interface_repeat">
<div id="bg_interface_middle">
<div id="text">
<?PHP
include("cutenews/show_news.php");
?>
</div>
</div>
</div>
<div id="bg_interface_bottom">
</div>
</div>
</body>
</html>
NOW THE CSS SHEET which you can find here >> www.zombies-ate-my-brain.com/stylesheets/stylesheet.css Hello all, Its my first post here so you'll have to bear with my ignorance for code! (im just a lowly designer struggling to learn HTML) Heres the site im having problems with http://www.madewithpixels.co.uk ive been hammering away at this over the last two weeks trying to sort out all sorts of cross browser problems... the aim being to get the whole thing rendering exactly the same on all browsers / all platforms... Ive sorted the cross browser issues... but am having problems with layout of the page on MAC Internet Explorer 5.2 (everything is a-ok in safari) The problem is (for those of you without access to a mac) the main navigation links in the top frame. they are aligned perfectly well on my PC in all browsers... but in MAC IE5.2 the alignment is all over the place.... I was originally using <span>'s to set the line spacing / padding of each line, but to ensure cross browser support I had to swith to using <DIV>'s inside a .container style in the CSS.... i am positive that this is where the problem lies as the text lined up perfectly on the MAC before i switched from <SPAN> to <DIV>'s ANY help at all here would be greatly appreciated... i am soooo close yet so very far away! thanks Mike **edit** ive just been playing around with this for an hour and found that changing the text size within IE MAC to say 90% and then changing it back to 100% seems to correct the problem.... curious, now im even more baffled than before! |
|||||||