|
CSS - Css Layout Discrepancies
I'm not sure if this should go here or in the ASP.NET section. If the other is more relevant, please move my post.
I'm trying to create an extremely simple layout for a web page I'm creating. When I fire up notepad and write it all down, it loads exactly how I want it to look. However, when I do it in asp.net, I do not get the look that I was going for. Here is the code for the layout that I wrote in notepad: Code: <html> <head> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; height: 100%; } .header { background: #aabbbb; height: 9%; width: 100%; margin-bottom:1%; } .leftcol { background: #aabbbb; float: left; width: 15%; height: 89%; } .content { background: #aabbbb; float: right; width: 84%; height: 89%; } --> </style> </head> <body> <div id="header" class="header">Header</div> <div id="leftcol" class="leftcol">LeftNav</div> <div id="content" class="content">Content</div> </body> </html>
and this is what it looks like URL http://i.imgur.com/ANEjp.png Now here is the .aspx page and css file for the asp.net project: Code: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudentHome.aspx.cs" Inherits="Website.StudentHome" %> <!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 runat="server"> <title>Certmanager: Student Access</title> <link rel="Stylesheet" type="text/css" href="MyStyle.css" /> </head> <body> <form id="form1"> <div id="studentHeader" class="header">header</div> <div id="leftNav" class="leftcol">left</div> <div id="content" class="content">content</div> </form> </body> </html> css Code: body { margin:0px; padding:0px; height:100%; } .header { background:#aabbbb; width:100%; height:9%; margin-bottom:1%; } .leftcol { background:#aabbbb; float:left; width:15%; height:89%; } .content { background:#aabbbb; float:right; width:84%; height:89%; } div#CredentialsDiv { margin:15%; background: #aabbbb; width: 350px; margin-left: auto; margin-right: auto; padding: 5px; }
and finally, here is what we have for the asp.net project: URL http://i.imgur.com/Efg2L.png Please tell me what I'm doing wrong Similar TutorialsI have some css issues between browsers and was wondering if anyone could help. I'm new here so it won't let me post the URL, but here's a description. In safari and firefox I get a small gap between the top of the browser window and the content container, so my background shows on top. In IE it's all flush to the top. I want flush to the top everywhere, with the background only visible along the left and right sides. In IE and safari there's a box around the (clickable) logo, in safari there's not. I don't want the box. I specified no border, but I still get the box. I specified the image midway down the main content area to align left so the text would wrap around it to the right. I see this take effect in dreamweaver's design view, but not live. hi. i'm having a problem getting my content to show up in the same place in internet explorer and firefox. for some reason the block of text is slightly higher in internet explorer. here is the css: .content { position: absolute; top: 94px; left: 163px; width: 400px; } and the html: <div class="content"> <p>content content content</p> <div> has anyone else noticed this? is there a way to fix it? html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style = "text/css"> .main { width:200px; height:300px; position:absolute; background:yellow; top:0px; overflow:hidden; } .container { display:inline; position:absolute; width:100px; height:100%-; _height:100%; margin-bottom:auto; top:151px; bottom:0px; background:red; overflow:hidden; } .test { display:inline; position:absolute; width:100px; height:100%; background:blue; } </style> </head> <body> <div class ="main"> <div class="container"> <div class="test"></div> </div </div> asdfasasdfsdaf </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style = "text/css">
.main {
width:200px;
height:300px;
position:absolute;
background:yellow;
top:0px;
overflow:hidden;
}
.container {
display:inline;
position:absolute;
width:100px;
height:100%-;
_height:100%;
margin-bottom:auto;
top:151px;
bottom:0px;
background:red;
overflow:hidden;
}
.test {
display:inline;
position:absolute;
width:100px;
height:100%;
background:blue;
}
</style>
</head>
<body>
<div class ="main">
<div class="container">
<div class="test"></div>
</div
</div>
asdfasasdfsdaf
</body>
</html>
Basically I have a div that fills up the main div(main). The reason that there are 2 other divs is because one is slightly translucent and I didn't want the text to be translucent so it is for sitting on top of it and displaying the text, (I know it doesn't do that right now, this is just example code). My problem is that I want the div(test) to fill up the main div(main) from a certain point down, that is make it start 151px from the top and then expand until the bottom of the main div. I discovered that you can do this in firefox and opera by placing a - at the end of the height:100%. I don't know if this is correct, but it works. It does not work however in ie6. i can chop it using overflow:hidden;, but thats not really the functionality I want since the div in the final version will have a border on it. Is there someway to make it display the same way in Internet Explorer 6 as in firefox? Thanks akurtis Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom 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. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Hi there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance Hi, How do I position "new.gif" on the same line as text "some subject here" ? Right now "new.gif" appears on right side as intended but underneath text. Code: <td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td> Thank you. Hello, I am creating the base design of a web site that consists in two horizontal bars: Navigation and Intro. "Navigation" will contain the menu. "Intro" will contain two items: a logo (image) on the left and a banner (flash) on the right. In this moment I have the following: http://www.27lamps.com/Beta/Bar/Bar.html I am not sure if using a background image is the best way to do this ... ... it seems to me that since the two bars are two different sections then I should use two divs. So the questions I have: 1. Should I use two divs, one for each bar, and setting the line- height in em instead of using the background image? 2. How to place side by side the logo and the banner and centered them vertically? 3. I would like the Navigation and the Intro bars to have a minimum height. Thanks, Miguel Hi, Happy New Year This is a continuation of a thread begun in the javascript forum. I'm continuing it here because I think I've solved/avoided some of the javascript aspects of the problem by tackling the design in a slightly different way. I'm struggling with what should be the simplest part of this problem, which is to make the li elements arrange themselves like the attached image rather than the way they presently appear on my site. Furthermore, ideally, I'd like it all to work with the smoothness of Isotope or Quicksand, but maybe that's a problem for another day... As always, any and all help gratefully appreciated! (Also, I'm baffled as to why the thumbnails show up fine on my home PC, but not at all on my work one !?!? Oh, now it's working - this is too bizarre!?!?) Hello. I am currently trying to learn CSS. I have experience in HTML, PHP/mySQL, and some .NET(ASP.NET & C#). I am currently working on a web design project. I know how beneficial CSS can be. I am understanding most of the concepts. I am trying to divide my page up into a parent main page. For example, there is a background color(style). On top of that is my parent main page section. It is similar to a piece of paper on top of a larger(darker) piece of paper. Then within that main page I am going to have about 3-4 separate boxes, which will make up different sections(news, departments, etc). The problem I am having is I have everthing setup with 1 box within the main page. However, I put the other box in the same nested <div class = "page"> tag and I can get it where I want in terms of left, right, and bottom positioning for margins. However, I can not get the 2 boxes to be on the same row. There is space on my page that I cannot use. With my prior experience I know that the solution to this problem was using nested tables. However, from my understanding I thought I could refrain from using tables and use some CSS techniques instead. Please give me any input you might have or any questions that might seem confusing. I might be able to post up a site so a person could see what I am trying to do. Hi everyone- I'm new here and am a newbie with CSS layouts. I'm having trouble with certain elements on the page that I was wondering if someone might be able to take a look at my code and html file. I'll trade graphics services for a few minutes of your time if neccesary. Hopefully someone can let me email them I'll give mine as well I'm sure it's easy to find on my profile. Thanks in advance for any help. heyya, I'm doing a quick layout, and I'm running into some problems with my floating menu. 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">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:white;
font:normal 1em/150% Verdana,Arial,sans-serif;
}
#container {
width:750px;
padding:0;
margin:0;
background:#FAA;
}
#contents {
width:566px;
margin:10px 0 0 162px;
border:1px solid #999;
border-bottom:none;
padding:10px;
background:#FFF;
}
#contents p {font-size:80%;line-height:150%;}
#menu {
width:160px;
background:#FFA;
margin:0;
padding:0;
float:left;
}
img {border:none}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
<div id="contents">
<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
<h3>Welcome to mook</h3>
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
</div>
</body>
</html>
readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case. So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode. TIA, Greg Hi I have a problem where my design does not look the same in 2 browsers for MACS. Netscape 7 MAC OSX 10.3 and Opera 6 MAC OSX 10.3. If you take a look at http://dmumford.bizhat.com/calibre/ you will see what it is supposed to look like. The links below are the MAC screenshots taken from browser cam http://www.bullsigns.com/netscape7-mac-osx-10.3.jpg http://www.bullsigns.com/opera6-mac-osx-10.3.jpg If anyone could help, i would be eternally grateful, as I have never needed to worry about MACS before. Thank you Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie. my code is index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- container -->
<div id="container">
<!-- start wrapper -->
<div id = "wrapper">
<!-- start header -->
<div id = "header">
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<!-- start nav -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end nav -->
</div>
<!--end header -->
</div>
<!-- end wrapper -->
</div>
<h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
<!-- end container -->
</div>
</body>
</html>
css file Code:
/* general html element formatting */
html, body, table {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #000000;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px 10px 0px;
text-align: center;
}
h1 {
font-size: 150%;
margin-top: 0px;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 100%;
}
h5 {
font-size: 100%;
color: #FFFFFF;
}
#container {
background-image: url(images/background_gradient2.jpg);
border: 1px solid #000000;
}
#wrapper {
width: 760px;
height: 600px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 760px;
background: #242424;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul {
padding: 0;
margin: 0;
background-color:#242424;
}
#nav ul li {
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
font-size: 120%;
color: #FFFFFF;
background-color:#778899;
text-decoration: none;
padding: 0px 25px 0px 25px;
border-right: 0px solid #000000;
text-align: center;
width: 9em;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}
please find attached a screenshot in firefox. Any help is appreciated. thanks! Hi, I am relatively new to CSS and am trying to come up with a layout very similar to Noteableapp. What I like about that design is that the taskbar stays floated at the top, while the central column exands with the width of the browser. What I'm trying to do different is have a much more detailed background image, rather than a simple gradient. The problem I'm having is that the navigation divs seems to be transparent so the detailed texture shows through. I've tried building the divs from scratch without success as I can't seem to get the central column to stay in the centre of the page, so I had a look at the css for Noteableapp however its a bit complicated for me and raised more questions than answers! Can anyone point me in the direction of a good tutorial to achieve a layout similar to Noteableapp or able to contact me and guide me through what is actually happening with the noteable css. My preference would be a tutorial so I can actually understand what is happening but any help would be much appreciated. 'Ello, I have just started to create a new web site for my self about a game called Warhammer 40,000. Although I have come across a problem near the start of its construction. I have a layer in the top right hand part of the web site for the search fields, on Internet Explorer it positions it self fine, but in Netscape (tried in v7.2) and FireFox (tried in v1.0 and v1.0.3) it its slightly higher and in Opera it just displays it all the way off to the bottom of the web site. One thing I have noticed is that this layer aligns up perfectly in Opera providing there is nothing between the two div tags, which seems strange to me. Here is the home page of the web site, as you can see there isn't much done to it yet as I want to fix this problem before procceding onwards. My CSS document is located here. If you view this in Opera v7.52, Netscape v7.2, FireFox v1.0 and/or v1.0.3 and Internet Explorer v6 you will see what I men in the top right hand corner, may have the same effect in other versions of these browsers but I have not checked. Thank you in advance, El Barto. I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path... http://jjs5327.aisites.com/IMD311/index.html Code:
@charset "UTF-8";
/* CSS Document */
body {
background-color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#000000;
}
#site {
width:775px;
height:500px;
margin:25px auto 0 auto; border:none;
}
#container {
width:775px;
height:500px;
margin:0 auto 0 auto;
border:1px solid #99CCCC;
}
#header, img {
margin-top:10px;
border:none;
cursor: default;
}
#left {
width:210px;
height:208px;
margin-top:80px;
margin-left:20px;
border-top:1px solid #99CCCC;
border-right:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float:left;
clear: both;
}
#menubar, #menubar p {
background-color:#FFFFFF;
text-align:left;
margin:auto;
}
#menubar a {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#FF9933;
text-decoration:none;
padding: 7.1px 0px 7.21px 10px;
border-bottom:1px solid #99CCCC;
cursor:default;
}
#menubar a.active {
color:#99CCCC;
}
#menubar p:hover a, #menubar a:focus, #menubar a:active { color: #FFFFFF;
background-color: #99CCCC;
}
#right {
width:520px;
height:390px;
margin:15px 40px 15px 255px;
border-top:1px solid #99CCCC;
border-left:1px solid #99CCCC;
}
#headline {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:14px;
text-align:center;
margin-top:60px;
}
#content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:10px 60px 10px 60px;
padding:5px;
line-height:20px;
}
#sumheadline {
font-family:Arial, Helvetica, sans-serif;
color:#000000; font-size:14px;
font-style:italic;
text-align:left;
margin:60px 0 0 90px;
}
#sumcontent ul{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style:disc;
text-align:left;
width:250px;
padding:10px;
margin-left:150px;
line-height:20px;
}
#techcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:60px 60px 10px 60px;
line-height:20px;
}
.tech2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#expcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:460px;
height:330px;
margin:59px 30px 10px 30px;
line-height:20px;
overflow: auto;
}
.exp2left {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#gencontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:490px;
height:385px;
margin:15px 10px 10px 15px;
line-height:22px;
}
.deshead {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
margin-left:115px;
padding-top:10px;
}
.description {
width:350px;
margin-left:115px;
}
#example {
overflow-y:scroll;
overflow-x:hidden;
height:389px;
width:519px;
}
#example1 img, #example2 img, #example3 img, #example4 img { float:left;
}
#example1 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example2 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example3 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example4 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#content li {
padding:5px;
}
#footer {
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:right;
width:775px;
height:20px;
margin-top:5px;
}
This is my mockup: http://beta.investchallenge.com/ The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS. Any ideas? |
|||||||