|
CSS - Dupilcate Layouts Render Different Size
I am sooooo annoyed with this!
I have designed all of my pages with the same template however 2 of my pages seem to be roughly 10 pixels wider even though they all have a width of 940 pixels. www . toolboxstrategies . com/test/brauer Pages: Home, Communities & The Brauer Way are perfect but pages Our Region and Contact seem to be slightly wider than the rest.. How can that be when my header, body and footer all have a width of 940px? Tried to fix this for HOURS but I can't figure out what is causing it! Thank you!!!!!! Similar Tutorialshttp://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size? Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout? Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
background-color: black;
color: white;
}
#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}
#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}
#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}
#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}
#nav li {
list-style-type: none;
}
#nav a {
text-decoration: none;
}
#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}
a {
color: silver;
text-decoration: underline;
}
a:hover, a:focus {
font-weight: bold;
}
a:visited {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px;
}
p {
margin: 5px;
}
select {
width: 30%;
}
textarea {
width: 40%;
}
.floatimage {
float: left;
margin: 10px;
}
Code:
<style type="text/css">
<!--
.inside {
background-color: #CC9;
border: thin solid #000;
margin: 20px;
float: left;
clear: left;
vertical-align: middle;
text-align: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.tit {
background-color: #FC0;
clear: both;
float: left;
width: auto;
margin-top: -10px;
border: thin solid #000;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding-right: 2px;
padding-left: 2px;
}
.lab {
text-align: right;
}
-->
</style>
<head>
</head>
<html>
<body>
<div class="inside">
<div class="tit">
Size
</div>
<br />
<table>
<tr>
<td class="lab">Width:</td><td><input name="pxWidth" type="text" value="250" size="6" /></td>
</tr>
<tr>
<td class="lab">Height:</td><td><input name="pxHeight" type="text" value="80" size="6" /></td>
</tr>
</table>
</div>
</body>
</html>
Could someone tell me why does this piece of code doesn't render the same way in IE as it does in Firefox. In Firefox everything is fine... I think it has something to do with the margin property of the .inside class [Edit] Sorry about the sloppy post. I actually resolved the issue. It had to do with the way IE understands divs. Thanks you for your reply First off I am entirely new to using CSS for anything other than some link and scroll bar decorations. Secondly, this code does not (currently) validate but I think I can resolve those issues, but before I go to the trouble of appeasing a (forum) guideline and making sure the code validates I have some questions that may or may not prevent me from using the code or CSS all together. The code (template/stle sheet) I am using is from http://www.code-sucks.com/css%20layouts/css-3-column-layouts/ the top question I have now is: How can I seperate elements within the "header" section of this format? i.e. within the "header I would like to place a logo to the far left + a slogan and also place an advertising banner? normally I would do this with three or more table cells. would it compromise the benefit of switching from mainly table oriented pages to CSS by including "some" tables within the CSS sections? Thanks for any insights and sorry if I have crossed any lines with this query. I think it would answer a lot of questions if we make a list of cross browser css layouts. I am going to post all of my submissions via http://www.blendedcodes.com so everyone can see a live demo and change the code around live. Please post your submissions via blendedcodes.com or a similar site that lets visitors interact with the code. This is all about everyone learning the css layouts... I'll compile them all and post the final list when I close the thread. Centered body with left and right columns http://www.blendedcodes.com/DTrzZ6In Table made of floating divs http://www.blendedcodes.com/CFwtV3S1 Hi, Am very new to CSS, and need some advice. Broadly speaking, how would I achieve this layout using purely CSS? Thanks in advance http://forums.devshed.com/attachmen...tachmentid=4990 This is driving me absolutely insane. The transition from table designs to css designs is a brutal one, in case no one is aware. Table designs seem so much easier, but I guess I might as well be compliant. Here's my problem: All I need to do is have a three column box that has a select box in the left column, then two images vertically aligned in the middle within the middle column, and a second select box in the right column. This would be incredibly easy with tables seeing that all I would need is: Code: <table>
<tr>
<td align="left">
<select>
<option>Option</option>
</select>
</td>
<td valign="middle" align="center">
<img src="picture1.jpg"/><br/>
<img src="picture1.jpg"/>
</td>
<td align="left">
<select>
<option>Option 2</option>
</select>
</td>
</tr>
</table>
I'm assuming that since it's this easy to do with tables and everyone is opposed to using tables for design, there must be an easier way using divs and the like. Please enlighten me, someone! I've been thinking about switching over to making table-less css layouts, but there's been a few things holding me back, as I'm not sure if they're possible. Firstly, can you have two fixed width divs on the sides of a variable width div, which will stretch to fit the screen? Something like this is generally what I mean: Code: <div style="width: 50px; float: left;">left</div> <div style="width: *; float: left;">middle</div> <div style="width: 50px; float: left;">right</div> Also, is there any way to make a div that has been placed to the right of another match the height of the the one to it's left? Basically, I want it to behave more like standard tables do in that every cell in a row is the same height. Is this possible? Hi all, Wanted to put this to some experienced devs and just ask, why is IE8 screwing my floats!? :'( So sad.. Here's my file: Code: <html><head> <style media="screen" type="text/css"> body { margin:0; padding:0; border:0; background:#535353; font-family:"Cambria"; text-shadow: 0px 2px 1px #3b3b3b; } #masterwrap { width:100%; } #wrap { margin:2%; border:2px solid #3b3b3b; } h1 { color:#8c8c8c; font-size:2.3em; text-decoration: underline; } h2 { color:#8c8c8c; padding:0; margin:6; } h5 { margin:80; font-size:8em; color:#ffb142; text-shadow: 0px 2px 1px #3b3b3b; } #header { text-align:center; border-bottom:2px solid #3b3b3b; width:100%; height:80px; } #nav{ clear:both; text-align:center; width:100%; height:50px; border-bottom:2px solid #3b3b3b; } #left { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #right { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #fat { clear:both; width:100%; text-align:center; border-bottom:2px solid #3b3b3b; } #bottom { clear:both; text-align:center; width:100%; height:150px; border-bottom:2px solid #3b3b3b; } #footer { clear:both; text-align:center; width:100%; height:50px; } </style> </head> <body> <div id="masterwrap"> <div id="wrap"> <div id="header"><h1>header</h1></div> <div id="nav"><h2>nav</h2></div> <div id="left"><h2>left</h2></div> <div id="right"><h2>right</h2></div> <div id="fat"><h5>fat</h5></div> <div id="bottom"><h2>bottom</h2></div> <div id="footer"><h2>footer</h2></div> </div> </div> </body> </html>
just copy paste into a html to view. i have been for 7 years now developing websites using tables and CSS, and nowadays i realized that i should use <DIV>s to create layout for my websites as it will be faster and SEO friendly. so can you please tell me any tutorials that teach me how to build a website using <DIV>s? and do someone know whether Lynda offers this or not? I've got two pages, one created using tables for layout, and one using css . With the text columns in the tables layout, as you can see, no matter how much text you put in either column, the grey-background container will be pushed down. However, with the text columns in the css layout, I had to float the right column to the right in order to display the two columns together, and therefore, if you have more text in the right floated column, adding more or less text does not push down the height of the grey-background container. Can anyone tell me how I can fix this while allowing for random amounts of text to be displayed in either column, in the layout? I'm having an issue with a CSS layout I"m working on. 1.For some off reason the div element for my page footer appears to think its inside of the mbox div. no matter what I have tried I can't get the pagebot div to the bottom of browser. 2. Width of 100% still leaves 30 or so px's on the right, any reason for this? 3. setting a min-height of 500 or so for mbox or innerbox divs has been ignored. Code:
<html>
<head>
<title>Untitled</title>
<style>
#container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#pagetop{
position: relative;
top: 0px;
background-color: #ADD8E6;
width: 100%;
height: 65px;
}
#pagebot {
position: relative;
background-color: #ADD8E6;
height: 65px;
clear: both;
}
#mbox {
position: relative;
border: 5px solid #000;
}
#innerbox {
position: relative;
left: 10px;
}
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="pagetop"></div>
<div id="mbox">
<div><img src='imgs/logo_tot_grey.jpg' width='280' height='95' alt='' border='0'></div>
<div id="innerbox">
<p>Test</p>
</div
</div>
<div id="pagebot"></div>
</div>
</body>
</html>
Hi there, I wanted to make buttons for my menu but I didn't want to use a lot of bandwidth so I decided to use Layouts and use the same image button over and over again! I made it in FrontPage with a great success but at the end I found out that the layout doesn't work in FireFox, the writing is all over the place in FireFox. Here is the code: Code: <div id="logo" style="position:absolute; left:-1px; top:20px; width: 171px; height: 45px;"> <p align="center"><font face="Tahoma" size="2">TEST LAYOUT</font></div> <p> <img border="0" id="img1" src="../button22.jpg" height="30" width="150" alt=""></p> If you apply it in IE it works, but if you apply it in Firefox it doesn't work. Thanks in advance for your help and support. Best Regards, John I am looking for a CSS tutorial which teaches how to make a layout like this layout Basically a 3 column layout with boxes in the left and right columns Thanks 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 Hi Guys, we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect. Link 1 Link 2 (forum) Screenshot Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens. I think problem is somewhere in CSS file. Link to CSS file Where could be the problem? p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads. So here is my question and dilemma. In almost every design you want the same layout for all the pages so one css style sheet is really all that is needed unless you are providing a different browser support or a different media option. However, lets say inside that site you want a page that will have a photo gallery or embedded videos. So then you may need to lay out a bit of a different layout for that page and its content. Is it better to just have those declarations in the same external style sheet, then applying it to that one page; or should it be placed in a separate css style sheet just for the page or because it is so isolates should it be placed in the xhtml internally? I would think placing in in the xhtml would not be a good idea but the other two options is bit more gray LB I've been reading over a bunch of threads and CSS vs. table websites & articles, all with varying degrees of CSS fanatiscm to "long-live-tables" viewpoints. I too am trying to make a decision on how to embark on a new site strategy. I think for most developers, re-coding an existing site to full CSS is probably not cost effective. I'm using CSS for everything except positioning right now. So my question is, how are you approaching from-scratch NEW site development layouts? |
|||||||