I am trying to force a table row that only contains images to be the images' height, but the page always displays a few extra pixels tall.
See http://www.slamgmt.com/newsite/index.php
Also http://www.slamgmt.com/newsite/sla.css
The banner at the top uses CSS classes "banner" and "bannersidebar" all of which explicitly set the height, but the actual height is too large, as seen by the white space below the banner and above the black line.
Does anyone know a way to force it to trim that space?
add display:block to the header image, that should fix it...
img.topbanner
{
max-width:100%;
border:0px;
display: block;
}
I don't think I've ever given a height to a tr, it just becomes as tall as the td within.
Also, you're defining a tr height of 192, but the td is 194, taking into account for the 2px border.
tr.banner
{
height:192px;
max-height:192px;
}
td.banner
{
height:192px;
max-height:192px;
border-bottom:2px solid black;
}
I believe img tags add a slight margin around them. Try setting the margin:0px on the img and see if that gets rid of your issue.
Related
I have a table in a div inside another div. The direct container has a width of 40%, and I want the table to be as wide as this div, by setting width: 100%.
Relevant Markup
This works most of the time, however depending on the width of the browser window, the width of the table is sometimes off by a single pixel:
As you can see to the right, the border is a pixel to the left of that of the sibling div .info. These borders should align.
Relevant CSS
#userListContainer{width: 40%; float: left; }
.info{display:block;line-height:22px; height:22px; padding-left:10px; }
#userListContainer .info {border-right: 1px solid #999999;}
.userList {
width: 100%;
border-right: 1px solid #999999;
word-break: break-all; border-spacing: 0;
border-collapse: separate;
}
Seems like a rendering bug to me. It occurs in Chrome 34.0.1847.131, not in IE10. I can't reproduce it in IE10 or the current version of FireFox.
The error replicates here for me on CHROME.
I inspected the element, and what I noticed is, the width of the table box was 217.443 px (obviously due to the % widths)
in the inspect element HTML section, it defines the width of the table as 218 px, and the containing div as 217px..
When I expand the broswer window slightly, thus making the table width increase past 217.443 px, to 217.680 px,
the HTML section displays BOTH the table width and the containing div as 218 px.
so im guessing the browser is rounding the pixels off to the nearest whole pixel.
could this be the right route to investigate?
edit: Try this and see if this works for you. I have fixed the problem (I think) in this jfiddle
http://jsfiddle.net/E2mUQ/3/
I simply removed the width on the .table class, and relaced it with DISPLAY:block
I had the same problem and managed to solve it by setting the width slightly higher:
width: 100.12%
I made an attempt to make the extra percentage small enough to solve most cases, but not create an overflow of 1 px.
It worked for me. This is somewhat of a dirty fix though.
I think it's to do with inset/outset borders - which are different between browsers. Try applying a border to the parent div instead of the table. This should sort it out.
I'm in the process of transforming an existing fixed layout to be "fluid".
I've got 2 issues:
When #content contains a lot of data, which makes it expand over the viewport I can't find a way to have a margin at the bottom.
The #content seems to "loose" it's height when position:relative; is added, which is necessary to place #content on to of #topgradient. I need #test (blue border) to fill #content and #content needs to fill #contentwrapper.
I've got an existing fixed layout which works great, the issues began after I added/changed height: auto; min-height: 100%; on the divs.
See this sort of messy/prototyping jsfiddle: http://jsfiddle.net/bQeu3/2/ (click in the white area (#content) to change content)
The optimal solution on issue 1 would look like:
The optimal solution on issue 2 would look like:
Hope you can help?
for the first question:
http://jsfiddle.net/bQeu3/7/
remove height:100% from #page
add padding:1px to #page
add margin-bottom:100px to #contentwrapper
to keep the size of #contentwrapper when you clicked something:
#test{
min-height: 300px;
border: 5px solid blue;
margin: 5px;
}
you might need to correct the 300px considering borders and such...
I'm trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.
Examples of what it should look like: http://imgur.com/a/lMSMR
You can see the page with the photos here: http://blueboxluxe.com/praise/
Anyways, few parts of this is harder to do... 1) the layout is fluid -- the photo size can change. 2) I want the border to show up on all photos -- no matter the size. 3) On the praise page, there's a lot of floats happening; so, things need to work with that correctly.
I've tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.
Try the outline property and specify a negative offset:
outline:2px solid red;
outline-offset:-15px;
No IE support though!
you can also try a container div
<div><img src=""/></div>
give div a fixed height and width and overflow hidden.
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
Maybe create a div within the div that contains the image, set it to
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
and then give the element that is containing it:
text-align:center;
Alternatively, if the image is floating in a much larger div that contains other elements, put it into a parent div set to the size of the image then put the new div that will add the border underneath or above the image; do not put the image into the div that you want to use as a border; the reason I used percentages is because it should then resize depending on the size of the image.
If you play around with the numbers it should work as you wish.
you can use the box-shadow property in css3. Use a 1px thick box-shadow with a color would give you that effect on almost all browsers.
I have a problem that I've replicated in various browsers.
I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/. The wrapper has a 1px border and 5px padding. The image inside is sized to 100% width.
For some reason, though, there is more than 5px between the bottom of the image and the bottom of its wrapper. See how the padding does appear to be equal on all sides of the images? There seem to be 3 pixels added from... somewhere. Firebug doesn't let me know where from.
How can I get rid of the space? I can't use absolute positioning to fake the padding because I'm not yet sure I'll always know the exact height of the image.
Help is much appreciated!
It is a known issue. Try:
img {
display: block;
}
It's a line-height. Images are rendered as inline-block elements by default. The line-height makes sure that following text does not stick to the image like here:
<img...><br>foo
Both these fixes are useful, depending on the situation:
.imgContainer { line-height: 0; }
img { display: block; }
No extra spacing if you add img {display:block}
http://jsfiddle.net/lexy0202/uxMu9/2
Like I guessed it is the display attribut:
#container {
display:block;
width: 50%;
margin: auto;
margin-top: 100px;
}
Hai ,
I am using a html table for my website layout .
when we press enter in one cell , the cell is resizing.
I used css for fixing the table layout. table layout is not changing .But cell is resizing.
.pageContent table
{
height:100%;
width:100%;
table-layout:fixed;
}
.pageContent table tr td
{
padding:5px 10px 5px 10px;
}
how to prevent this resizing of table cells ?
Your table is re-sizing because you are using proportional widths.
There are many ways you can control this. For example, by setting your or height in pixels:
CSS:
table td {height: 20px;}
Your cells will no longer re-size vertically.
Have you tried adding the following CSS
td { overflow:hidden;white-space:nowrap; }
tr { height:1em; } /* or set an appropriate height and width */
This will hide the overflow in the cells however, but they won't resize.
Your layout might be easier to do with semantically correct HTML, using <div> elements but would need to see the markup.
It's hard to be sure, but you haven't set a size on the td in question, only padding. So the td will be expanding to contain whatever is inside it. In some browsers this might change a wee bit with focus.
Could you try setting an explicit width and height (in ems or pixels) for the td?
.pageContent table tr td
{
padding: 5px 10px 5px 10px;
width:8em;
height:2em;
}
Could you post a bit of your markup, or let us know what the content in the cells is? (And which browsers you're seeing the problem in).