I'm trying to create a horizontal menu with a thick border bar that shows over the hovered item. However, for some reason there's a small gap at the right end of the bar in Firefox and Chrome. Strangely, IE displays it without the gap. Firebug doesn't show any reason for this gap.
I tried using simple divs and still it appears. I've distilled it down to a single HTML sample, with divs only.
Can anyone explain this and tell me how to get rid of that gap?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Weird border spacing</title>
<style type="text/css">
div.outer
{
border-top: dotted 1px lime;
margin: 10px;
}
div.outer div
{
display: inline;
margin: 0;
padding: 0 12px;
border-left: solid 1px silver;
border-top: solid 3px red;
}
</style>
</head>
<body>
<div class="outer">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</body>
</html>
I floated the inner div left which fixed the weird spacing and the outer div left which forced the inner div to be inside of it. You can adjust the styles more to fit your needs.
div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
float:left;
margin: 0;
padding: 0 12px;
border-left: 1px solid silver;
border-top: 3px solid red;
}
You could also remove the new lines between the divs to fix just the spaces.
display:inline rarely works well. Consider using float:left instead.
Try to add:
body {
margin: 0;
padding: 0;
}
Browsers have different default values for these CSS properties.
the gap is caused by the breaking space/new line between the <div>. To fix this put all the <div> on the same line with no space between them. However I would recommend re-thinking the css, possibly using list <ul>
The reason you're getting the space is due to inline elements interpreting spaces as something to be rendered. This lets you do:
Hello World
and still have 2 separate words. To remove the space you have to...well, remove the space. When you're trying to put elements flush together for layout, as already mentioned, using float: left is the preferred option.
the declaration display: inline-block for the selector div.outer div may be what you want.
Related
I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Preface: I've read lots of articles about images inside a div having a strange space around them, etc.
Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div
Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..
Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.
What am I missing? It's my first question so be patient please :)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.
PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!
Change the line-height on the div to zero.
div{
background-color: #ffffff;
line-height:0;
}
jsFiddle example
Set vertical-align to top on the button. That will fix it.
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/
Please view the following HTML/CSS as a webpage. It displays an outline with borders around the various elements. The containing list intentionally allows for horizontal scrolling within a fixed width. The trouble is that when you scroll to the far right of the outline, you can see that the borders (all hot colors) of the inner elements overlap each other. The desired effect is that they are all perfectly flush (on the right side) with the containing element so that no overlap occurs. What's the most simple CSS to accomplish this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
width: 300px !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
li, span {
padding: 0;
margin: 0;
}
#top {
border: solid 1px black;
}
#top > li {
overflow-x: auto;
overflow-y: hidden;
border: solid 1px yellow;
margin-left: -20px;
}
li {
display: block;
border: solid 1px red;
}
li, ul, span {
width: auto;
white-space: nowrap !important;
}
</style>
</head>
<body>
<ul id='top'>
<li id='trunk'>
<span>This is the trunk</span>
<ul>
<li><span>This is the first line item</span>
<ul>
<li><span>This is the first subitem</span><ul></ul></li>
<li><span>This is the second subitem</span><ul></ul></li>
<li><span>This is the third subitem</span><ul></ul></li>
</ul>
</li>
<li><span>This is the second line item</span><ul></ul></li>
<li><span>This is the third line item</span><ul></ul></li>
</ul>
</li>
</ul>
</body>
</html>
EDIT:
The following image shows a sample outline. Notice that the width is fixed and it can scroll to the right in case the user types a title that is longer than can display in the viewable area. Notice that the highlighted item and it's children are wrapped in light gray. There are some orange markings on the right used for debugging purposes.
http://drop.io/dfhejyj/asset/outline-png
The following image shows that same outline scrolled over to the right. The scrolling is intentional and must not be eliminated. The problem is that when I scroll right the titles protrude outside of the containing UL tag (appearing in light gray). Likewise, with the orange markings. The desired effect is that the orange markings and the gray area would always be flush up agains the right of the select area (delimited by the scroll bar), and that the scrollbar would always remain (so long as any of the titles are long enough to produce it).
http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png
DigruntedGoat's assessment is exactly right. However, I need a corrective approach. This could probably work more easily with the broken box-model used by the old IE browser.
They overlap because each <ul> element is set to 300px width, and it also has a left-padding which creates the "stepped" look. So the first list goes from 0 to 300px horizontally, while the second nested list goes from 20px to 320px, and so on.
I'm not totally sure of the effect you're trying to achieve (maybe you could post a mockup?) but perhaps setting the width on the outermost <ul> only (i.e. the #top selector) would do what you want.
li, span {
overflow: hidden;
}
demo
This is better though:
#top {
width: 300px !important;
}
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
demo
I was finally able to solve this by adding an extra container:
http://jsbin.com/itevo/2
Thanks to Sam H. and DisgruntedGoat who took the time to offer some guidance. :)
I'm having trouble with the layout of a simple HTML page. Please help.
Here's the layout I'm going for...
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
orange = body
blue/red = frame div
green = header image
black/white = menu div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu).
Internet Explorer, Firefox, Safari, and Chrome...
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
...
<body>
<div id="frame">
<img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
<strong>One</strong> |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine
</div>
<div id="content">
...
</div>
...
</body>
</html>
Notice there's no whitespace between the IMG and the menu DIV.
This is my CSS...
...
div#frame {
background: #FF0000;
margin-right: auto;
margin-left: auto;
width: 700px;
border: 5px #30AADE solid;
}
div#frame img#header {
margin: 0;
padding: 0;
border: 0;
}
div#frame div#menu {
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
border-top: solid 2px #FFFFFF;
text-align: center;
font-size: small;
color: #88BE34;
background-color: #000000;
}
div#frame div#menu strong {
font-size: medium;
color: #FFFFFF;
}
div#frame div#menu a {
color: #88BE34;
}
Why are Firefox, Safari, and Chrome showing that 4-pixel gap?
It has to do with the default rules for IMG tags.
I recommend always using this in your stylesheet as a default rule:
img{
display:block;
}
My guess is it's the line height of the image-elements line, since IMG is a an inline element. You could probably fix it by giving img#header display: block;.
Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there.
Edit:
When that is said, your menu should also be marked up as an unordered list (UL).
In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text.
freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode.
It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line.
You could either add the display:block property to a class or inline style on your image alone.
Or something like this:
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. In which case often you have already a class on the parent element like:
<div class="imagebox">
<img .... />
</div>
.imagebox img { display:block; }
You should wrap your menu links in an unordered list and then style the items with CSS. There are some reason for doing this:
Structuring your navigation links as a list results in more semantic markup. It better represents the content you are presenting. If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. This is especially meaningful if you intend the site to be viewable by mobile browsers.
This may also (slightly) help search engines prioritize the content and boost your ranking.
You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect. This will be reusable and makes it easier to change the menus to some other style in the future.
See A List Apart - CSS Design: Taming Lists
There is an example there showing complete CSS for achieving this effect.