<!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>Test</title>
<link href="tester.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tray">
<div class="tray_header">THIS IS A HEADER</div>
<div class="container">
<div class="red_line"></div>
<div class="text_1">THIS IS THE FIRST LINE OF TEXT</div>
<div class="text_1">THIS IS THE SECOND LINE OF TEXT</div>
</div>
</div>
</body>
</html>
Hello! First off, this is NOT a browser-related question. When you open this in Dreamweaver the second and third lines of text are displaced downward underneath the red line by about 20px or so.
The thing is they shouldn’t be. They should be tucked right underneath the red line.
Now this is where it gets weird – if you view it in any browser it does just that – sits right underneath the red line (as desired).
Normally I would just say screw it, it’s a Dreamweaver bug or something. However, in the real document (I’ve stripped down the code and included only the bare necessities so it can be viewed without all the other items getting in the way) there are more lines of text with red line separators in between them and so they just keep adding more and more vertical space to the layout and making it very difficult to see other items on the page.
I’ve gone through and added zero padding and margins on all rules thinking that perhaps there might be some issue with that but to no avail.
The interesting thing is if you remove the red div line, the text beneath pops up where it should be (as expected).
Any ideas?
Below is the CSS for the document:
body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color: #900;
font-family: Arial, Helvetica, sans-serif;
}
.tray {
width: 290px;
margin: 120px auto 0;
padding: 0;
position: relative;
}
.tray_header {
width: 290px;
height: 28px;
margin: 0;
padding: 0;
position: relative;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px 2px 2px #000;
text-align: center;
}
.container {
width: 290px;
margin: 0;
padding: 0;
position: relative;
}
.red_line {
width: 252px;
height: 2px;
background-color: #CB0000;
margin: 6px 18px;
padding: 0;
position: relative;
}
.text_1 {
width: 252px;
margin: 0 0 0 18px;
padding: 0;
position: relative;
color: #FFFFFF;
font-size: 15px;
}
Dreamweaver's Design View (and Live View for that matter) contain weird CSS rendering bugs and should never be taken as "true" views. What looks perfectly fine in the browser may look "off" in Design View due to the constrained workspace, presence of hidden element icons, or just plain weirdness. Altering your code to make it work in Design View is not a good use of time and may break things.
In short, always test with browsers. If it looks good there, you are all set.
Related
I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
Does the target div have to be physically 1px smaller or just display 1px smaller?
The easiest way would be to add in an "ie6 only" stylesheet:
.helper {overflow:hidden;}
.target {top:auto;}
This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.
IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
.target {position:static;margin:-1px 0 1px 0;}
I see you got the absolute positioned solution to work. Great!
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.
this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label description to the right of each one.
When i use attribute like text:align:centre because the labels are of different length it throws out the aligment of the textboxes [see image link below]
http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk
Is there an easy way of keeping the textboxes aligned and then have the labels off the to the right without changing the textboxes?
Thanks.
basically you have to define a width for your form and float: left input and float: right the label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 auto but you have to define a width.
The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.
I have made up an example for you:
http://jsfiddle.net/Qs4pk/2/
use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.
In your screenshot, you have text-align:centred each element inside a div. So you are seeing the correct behaviour for your current approach.
Instead you need to centre a div (the encompassing box of your textbox and label elements) and then left-align (which will be the browser default) the internal elements.
To centre a div use:
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
http://reisio.com/temp/form2.html
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
padding: 0;
}
form {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font: 12px sans-serif;
display: block !important;
display: inline-block;
overflow: hidden;
}
li {
float: left;
clear: left;
}
label {
display: block;
width: 200px;
height: 19px;
line-height: 19px;
position: relative;
margin: 0 0 5px;
cursor: pointer;
text-align: right;
}
input {
width: 120px;
position: absolute;
left: 0;
top: 0;
border: 1px solid gray;
padding: 1px 0;
height: 15px;
font: 12px sans-serif;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>
<label><input> Beans</label>
</li>
<li>
<label><input> Cornbread</label>
</li>
</ul>
</form>
</body>
</html>
You question have also a design aspect. What is the best alignment of labels and input textboxes from the users point of view? I was very surprised some months ago as I found "Web Form Design" at MIX09 (see http://videos.visitmix.com/MIX09/C17F). You will see on examples how to improve user experience if one place labels and input textboxes in other places. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/ and "Best Practices for Hints and Validation in Web Forms" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/ which some has close information.
I'm trying to have this block element to be horizontally aligned in the middle but at the same time I would like the width to be the minimum possible for the contents inside. But I don't think it's possible or I'm not able to do it myself...
a#button-link {
background: url("images/button-link.png") no-repeat scroll center left;
margin: 12px auto 0 auto;
display: block;
width: 125px;
height: 32px;
line-height: 32px;
padding-left: 35px;
font-weight: bold;
}
This is my current code... The idea behind this is that the text for that tag could be slightly bigger or smaller depending on the user language and how much characters the same sentence has for that specific user's language. There's no way I can control but I still would like to have this element horizontally aligned to center.
Is this possible with CSS?
Use display:table.
Update
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>display:table</title>
<style>
div
{
display: table;
border-collapse: collapse;
border: 1px solid #950;
margin: 100px auto;
}
* html div
{ /* IE 6. If anybody finds a good solution for IE 7: Tell me! */
width: .1em;
}
* + html div
{ /* IE 7 Hack. Not perfect. */
float: left;
margin: 100px auto 100px 45%;
}
</style>
<div>Some Text.</div>
Live Demo
Can someone point me in the right direction? I don't see why I can't get the black_bottom.png as background in rounded corners.
#charset "utf-8";
/* CSS Document */
html,
body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;
}
.justyParagraph {
text-align: justify;
}
a img {
border: 0;
}
.clearer {
clear: both;
}
.rounded_corners {
background: url(../images/box/black_bottom.png) no-repeat left bottom;
color: #FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
<div id="blockdark">
<div class="rounded_corners">
Content
</div>
</div>
This is an example, maybe it has something to do with the JavaScript for rounded_corners class?
http://www.coldcharlie.nl/test
Be sure that ../images/box/black_bottom.png is the path from your stylesheet to the image file. Everything else looks correct, but people don't always realize that paths are relative to the css file and not the page that includes it.
Try an absolute URL there and see if it appears then. If it does, you know your relative URL isn't right.
EITHER:
Your image doesn't exist at this relative path: ../images/box/black_bottom.png.
OR:
Your image is blank.
OR:
Your image has more blank space in the image's left bottom corner than the dimensions of your div.rounded_corners, and therefore the background image "overshoots" your div.
HI...
This might give you something to have a look at...
<html>
<head>
<style type="text/css">
#mydiv{
background-image:url('http://www.theregister.co.uk/Design/graphics/std/logo_414_80.png');
}
</style>
</head>
<body>
<div id="mydiv">
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
</div>
</body>
</html>
Just something to get you started.
Also, your div#blockdark doesn't validate - use #blockdark instead...
(The id should be unique, so tag type doesn't matter)
I am using Google Chrome 3.0.196.2 and I noticed that for some reason the #main div's background is shrunk a tad bit, even though it should not be. It tests fine in every other browser but chrome.
Anyone know why?
Link to site: link text
Even have a screen shot: link text
Notice the green on the right side is cut off, as well as things not lining up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
#main {
border: 10px solid black;
height: 300px;
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
background: #AAA url("http://www.ipalaces.org/weird/mainbg.gif");
}
#picture {
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
height: 100px;
width: 1000px;
}
</STYLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Imperial Palaces</TITLE>
</HEAD>
<BODY>
<DIV id="main">
<IMG id="picture" src="http://www.ipalaces.org/weird/mainbg.gif" alt="picture">
</DIV>
</BODY>
</HTML>
This seems to be working OK on Chrome 2: http://skipall.com/2vb.jpg
Remember that Chrome 3 is still in beta, it's possible this is just a bug (I'm not sure, of course).
To debug, I think I'd zero-out the paddings and borders - check for differences, then try substituting the IMG for DIV tag to check if it's the container or IMG at fault. Maybe even chuck in a couple of outline properties to see exactly what's going on:
#main {
padding: 0;
}
#picture {
border: 1px solid #EEE;
border-width: 1px 0;
}
/* and later... */
#main, #picture {
outline: 1px solid red;
}