I've been working on this for the past few hours and I give up. I cannot figure this one out.
I have an image (header logo), followed by a nav bar. There is a 2-3px space just below the image. I've systematically eliminated every bit of externally referenced CSS, and then added some inline CSS to try and fix the problem. Here's what I have right now:
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sci-fi's Big Mistake</title>
</head>
<body style='margin:0px; padding:0px; border:1px solid green;'>
<img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
<span style='border:1px solid blue;margin:0px; padding:0px; '>text</span>
<ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Contact</a></li>
</ul>
Shouldn't have cancelled this.
</body></html>
Here's a screenshot of the page, and what I'm seeing on my system (Win, xp, same in IE8 as well as FF 13)
http://picturepush.com/public/8737985
There you got it.
http://jsfiddle.net/dennym/XBdfk/
Removed the <br> and added a display:block to your image.
The space is gone.
The Problem was the <br> it has a min margin which u cant remove... i guess.
Also you have to add a display:block to your image, so the text appears at the bottom.
(Also removed a little error in your quotation marks)
The image tag code is not correct you didn't close the alt attribute so the styles aren't taking affect and you should be using double quotes
<img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
You also may want to remove the <br> and set display:block; on the image
There is no gap for me using Mac OS X/Chrome. My guess would be that your browser is setting a line-height on the span other than 1.
Try using a reset stylesheet, http://meyerweb.com/eric/tools/css/reset/. Also Firebug will easily allow you to hover over elements to see what sizes elements to pin-point where the padding is coming from.
If understand you correctly, the problem is caused by the fact that images are not only inline elements like text, but are also considered to be 'text'. Text is written with a baseline. Most letters align on this baseline, but some, like j, g and y not. So some pixels of space are included at the bottom, below the baseline when a text is rendered.
You can put this off by adding
line-height:0px;
to your image tag.
Another bizarre result of this image-equals-letter idea is that images that should be aligned side by side show a gap. Indeed: there are spaces between letters! You can solve this by adding to that sme image tag:
font-size:0px;
Another way to solve that problem you mention would be to make that header image the background image of a div with the same dimensions. Div's are only containers and have no font-like properties.
Hope this helps!
Related
I am fairly new to html therefore this may be something very basic for you. This is the css file for my code:
.sidepanel-list{
margin-left: 10px;
background-color:lightgray;
When i run the file, the background color I have mentioned takes up all the space on the lines as I have put in the image. How do I limit it so it only takes some of the space on the lines?
Image will make it way clearer to understand what i am saying: https://i.stack.imgur.com/04dYi.png
In CSS, an element has a certain size (obviously). Inside that element, you can add padding to keep text or whatever away from the edge. Outside it, you can add margin to keep other elements away from that element.
What this hopefully shows is that your code is doing exactly what you asked: making the background color of the element itself gray, and then adding a margin outside that area of 10px. (This is why the gray doesn't extend beyond the text, even though you've specified that 10px of left margin, which is pushing the text out from the edge of the window.)
If you want 10px of space between the text and the edge of the gray area, use padding instead of margin.
If what you want is to make the whole thing narrower, you need to apply a width to the stylesheet (e.g. width: 50% or width: 400px).
To get a feel for this stuff, it can help to use your browser's Inspector tool. Among other things, this will show you the size, padding and margin on each element, so you can see exactly what's happening with your layout.
<!DOCTYPE html>
<html>
<head>
<style>
p.set {
background-color:lightgray;
}
</style>
</head>
<body>
<p class="set"><b>Categories</p></b>
<p class="set">Cable & docks</p>
<p class="set">cases & films</p>
<p class="set">charging devices</p>
<p class="set">connected home</p>
<p class="set">headphones</p>
</body>
</html>
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.
I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).
The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.
I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it
Here's my code:
<div class="header_banner">
<img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
<ul>
<li>Home</li>
<li>Studio</li>
<li>School</li>
<li>Events</li>
<li>Shop</li>
</ul>
</div>
<div class="header_right"></div>
</div>
Here's the CSS:
.header_banner
{
float:left;
width:531px;
}
.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}
.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}
.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}
I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now.
Any ideas? (I've setup a background-color to see exactly where the gap is)
Thanks
I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.
You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html
It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.
Have you tried adding style="display:block;" to your img element?
I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:
<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..