The box model ought to be simple enough, but I just don't grok it.
Here's a meaningless form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Box model test</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body style="position:relative; top=0px; left=0px">
<form action="for_submitted.php" method="post">
<fieldset style="top:0px; left: 0px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 16px; width: 81px; height: 14px;">Box 1</div>
</fieldset>
<fieldset style="top:0px; left: 128px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 64px; width: 22px; height: 14px;">Box 2</div>
</fieldset>
<div class="submit_button" style="top:64px; left:64px;"><input type="submit" name="submitButton"
value="Submit"></div>
</form>
</body>
</html>
and its CSS
body
{
background-color: white;
width: 100%;
position: relative;
}
.panel, .label, fieldset
{
position: absolute;
font: 8px Arial;
}
.submit_button
{
position: absolute;
}
and I expect it to show
.---------..---------.
| box 1 | box 2 |
.---------..---------.
but in MSIE8 (which I am compelled to use) and in FireFox, it shows
.--------..--------.
| box 1 || box 2 |
.--------..--------.
why do they overlap?
There are several problems here. First of all, you need a reset CSS to remove the margin and padding added by the browser's User Agent stylesheet. Something like Eric Meyer's will do.
Secondly, after adding in the reset CSS there still will be some overlapping. This is caused by the borders, the widths of which are not part of width. outline is not affected by this, so I'm using that in the demo below to show that the elements are not actually overlapping, but I won't recommend using that in place of border. Instead, you should take into account the width of the border when doing your calculations.
See: http://jsbin.com/ofusa3/edit
Related
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
I am trying to put together a web page that will contain some charts, as well as some RangeSlider widgets to control the data ranges and granularity for the charts. I have created a few elements to hold various navigation items, and am at the point where I want to place my RangeSliders. Everything is working except that when I click on the shaded bar between the the handles, to move both handles left or right, the handles jump to the right-hand end of the slider bar, and stay there.
I am pretty sure it's due to an incompatibility between my div's absolute/relative positioning, and the slider components, but I'm going nuts trying to get it to work. If I just place the slider with none of my div styles, the slider works, but isn't where I want it.
The entire file is listed below. It's only about 80 lines, including my styling info. I attached it to the divs, rather than drawing it from an external .css file, for simplicity. To try it out, you will need to adjust the paths to the dojo components.
Someone with more expetise than I have can probably scope it out in a jiffy, but I can't seem to reconcile the dojo requirements with my own.
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Errlog Chart for Single Host</title>
<style type="text/css">
#import "1.7.src/dojo/resources/dojo.css";
#import "1.7.src/dijit/themes/tundra/tundra.css";
#import "1.7.src/dijit/themes/dijit.css";
#import "1.7.src/dijit/tests/css/dijitTests.css";
#import "1.7.src/dojox/form/resources/RangeSlider.css";
</style>
<script type="text/javascript" src="1.7.src/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.form.RangeSlider");
dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
</script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
background: #FC8;
position: absolute;
height: 30px;
top: 0;">header</div>
<div id='middle' style="width:100%;
background: #8FC;
position: absolute;
top: 30px;
bottom: 30px;">
<div id='left' style="background: #C8F;
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;">
</div>
<div id='right' style="background: #CF8;
position: absolute;
left: 25%;
top: 0;
width: 75%;
height: 100%;">
<div id='charts' style="background: #DF7;
position: absolute;
width: 100%;
top:0;
height:60%;">
CHARTS GO HERE
</div>
<div id='sliders' style="background: #BF9;
position: absolute;
width: 100%;
bottom:0;
height:40%;">
SLIDERS GO HERE
<div
id="hrSlider"
discreteValues="11"
onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});"
value="20,80"
intermediateChanges="true"
style="width:500px;"
dojoType="dojox.form.HorizontalRangeSlider">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="11" constraints="{pattern:'#.00%'}"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:10px;margin-bottom:-5px;"></div>
</div>
Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/>
Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/>
</div>
</div>
</div>
<div id='footer' style="width:100%;
background: #8CF;
position: absolute;
height: 30px;
bottom: 0;">footer</div>
<script type="text/javascript">
</script>
</body>
</html>
If the difference between min and max is not evenly divisible by the discrete value, odd offsets appear. Since you don't set min max, they default to 0 and 100. That is 101 values, which is not evenly divisible by 11
I've seen and read numerous posts on this subject but none worked in my environment or I did something wrong. I have a div that contains images and text of various unknown sizes. I want all the images and in the div to be vertically centered. I'm using Internet Explorer 9.
Here is my code, I'm removed all the various techniques I've attempted for the sake of simplicity:
<!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></title>
<style type="text/css">
div.header
{
height:75px;
background-color:#FFF;
padding-left:10px;
padding-right: 10px;
}
div.headerleft
{
border: none;
float: left;
margin: 0;
padding: 0;
}
div.headerright
{
border: none;
float: right;
margin: 0;
padding: 0;
}
h1
{
font: 44px Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
img.centerImage
{
vertical-align:middle;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="headerleft">
<img class="centerImage" border="0" alt="Test 1" src="../Images/test1.jpg" />
<img class="centerImage" border="0" alt="Test 2" src="../Images/test2.jpg" />
</div>
<div class="headerright">
<h1>
Centered Text Vertically
</h1>
</div>
</div>
</form>
</body>
</html>
I'd like to emphasize that the text and images are of unknown sizes. I've found this certainly complicates the solution. Also, based on ActiveX requirements, I'm using Internet Explorer version 9. Any advice out there? Thanks!
To use vertical alignment, you are better off setting a wrapper with the display set to table-cell:
See this Fiddle Example!
THE CSS:
/* the vertical alignment class */
.centerImage {
display: table-cell;
vertical-align:middle;
}
THE HTML
...
<div class="headerleft">
<span class="centerImage">
<img border="0" alt="Test 1" src="path_to_image.jpg" />
</span>
<span class="centerImage">
<img border="0" alt="Test 2" src="path_to_image.jpg" />
</span>
</div>
<div class="headerright">
<h1 class="centerImage">Centered Text Vertically</h1>
</div>
...
Tested:
IE9, IE8, OPERA, SAFARI, FIREFOX, K-MELEON, GOOGLE CHROME
Notes:
You should specify the image width and height to a proper HTML validation and to allow a better understanding by the browser.
Read More About This:
CSS Display Property | CSS vertical-align property | CSS Tricks: What is vertical Align?
EDITED
In regards to the comment given by reisio, to have the same vertical point to the images on the left and the text on the right, we can go with a more simple solution:
See the Fiddle Here!
RELEVANT CSS
/* the trick you want */
.centerImage {
vertical-align:middle;
}
div.headerleft {
border: none;
float: left;
margin: 0;
padding: 0;
line-height: 75px;
}
div.headerright {
border: none;
float: right;
margin: 0;
padding: 0;
line-height: 75px;
}
h1 {
font-size: 44px;
font-family: Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
RELEVANT HTML
<div class="headerleft">
<img class="centerImage" border="0" alt="Test 1" src="path_to_img.jpg" />
<img class="centerImage" border="0" alt="Test 2" src="path_to_img.jpg" />
</div>
<div class="headerright">
<h1 class="centerImage">Centered Text Vertically</h1>
</div>
For this solution, we use the vertical-align set to the img tag, and the line-height to create the same vertical-point and to align vertically the text.
You can read: CSS line-height Property
EDITED
If you can't set a height to the images, the only way to solve your issue is to use a bit of JavaScript to dynamically find the tallest image and apply that height to the line-height on the H1 tag.
See this working Fiddle!
JQUERY
$(document).ready(function() {
// initialize the variable to 0
var height = 0;
// run by each image to find the tallest
$('.headerleft img').each(function() {
height = ($(this).outerHeight(true)>height) ? ($(this).outerHeight(true)) : height;
});
// vertical center the text
$('.headerright h1').css({"line-height": height + "px"});
});
Note:
Removed the line-height from the div.headerleft and div.headerright since it is not longer needed!
I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line:
How do I achieve this in CSS? Here's the HTML file to play with:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.
That should work.
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.
Your span, input and button need the property:
vertical-align:middle;display:inline