Width and height of parent element not equal to image dimensions [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
A friend ask me to take a look on one issue on his site. In the portfolio section on the website, there is a border around the div and a rollover evect when the images are hovered. However, there is one weird issue, the height of the box containing the image and all data is larger by 5px in height.
The image is square, and all of the parent elements have width and height elements set to 100%, there are no paddings or margins that could have caused this, so I can't seem to find a reason for this.
Could anyone point to a location where is this happening and how to fix it?
A sample code describing this problem can be seen here.
Thanks!

Your code is heavily awful, but putting display: block on the images will fix it.
The reason is that images are inline elements, so you will get some phantom padding to the bottom to account for things like the bottom of g, p, q, etc.

Related

cannot set tr height to 100% or TD width to 100% [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
According to the inspect elements menu, this thing called <tbody> exists, and <tr> is inside it. The problem is, tbody, is 100% height and width, which it should be, but <tr> is always 4 pixels less in height than it should be, even when styled at 100% height
THEN
inside there are two tds, one has 20% and one has 80% width, but they both have these annoying border type things, that i cant get rid of, it looks like margin but honestly cannot find anything
This question is a bit of a mess, but i cant find any sort of solution
I would suggest looking at the padding around "tr". A great tool to use is Pesticide (it's a Google Chrome extension) that when it turns on, it will show the outlines of different sections to help you determine what is being controlled in terms of padding/margin. It sounds like there may be a padding issue. If you turn on Chrome Developer, under the Element tab on the right side, if you scroll all the way down, you can see the box model and see the padding/margin that is used in the respective section.

HTML Website leaving lots of space at the end [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am using a Relative DIV for the entire page but somehow A LOT of space is being left at the end of the page.
For my background, I had used an image but even that image is not that big.
And I've even set the bottom margin to 0px.
http://www.freelancertanish.comli.com
Thanks in advance !
Most of the whitespace is there because of <div id="div-1whiteback">, which has been given 100% height and positioned down about halfway (adding about half of the page's height again to the bottom). There is additional excess whitespace at the bottom because each of the divs surrounding the logos have been given a specific percentage height which exceeds their allotted space.
Hope that helps!

Why is there extra space at the bottom of my two column website? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
There is empty space at the bottom of my site, showing just the background image. If I set the height of .content to auto or 100%, that makes things even worse and destroys the site. How can I get rid of this empty space while still preserving the white box holding all my content?
http://www.michaelaoun.com/noursite.html
Link to the html file: https://www.mediafire.com/?l435v31v56du9ms
Add an overflow:auto CSS style to your #mainContent div so it expands to the floating content inside of it.

CSS Positioning - sections of the page overlapping [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a quick question about CSS positioning. I have already looked up all about absolute, relative, static etc but am still having problems. So, for example, on one of my webpages, I am using four different div's for the four seperate sections I have on the page. I can manage to position them so they look perfect, but the top left section expands as the user adds entrys. When it expands, it then overlaps the section below it. Same with the other side, the section expands a little if it needs to display error messages and overlaps the section below it. Any suggestions as to how I would overcome this?
Thank you !!
If you want divs to flow normally on a page, you don't have to use positioning. Generally, if you are using positioning, you use it for a div that you want to have in a specific place that would in a normal situation, be somewhere else. For example: you would position something relatively if you wanted it to actually escape the container it is in. You would position something absolutely if you want it to be in exactly the same place, no matter what (this includes scrolling) OR if you want to overlap divs using a z-index.
Usually, if you just want divs to line up side by side, you can display: inline or use float.

How could I extend <hr> from right to left? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have created a div and another div stays adjacent to it but I put an hr to right aligned div but want it to expand from right to left.
If you are simply using <hr>, clear your space for a line then it will automatically cover the whole region. Keep your both division inside a division and put <hr> in you main division. It would be better if you show your code.
It will span the whole way through if you put it in the top level div.
You can also add CSS to it to make it stretch nicely, but that's another story.