Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone tell me why my rollovers for my figures are 7px taller than the figures themselves?
Been looking at this for nearly 2 hours and it's driving me towards insanity.
Note: This site is nowhere near finished so there is probably lots still wrong with it but if someone could tell me where the 7px is coming from that would be great.
I can post code if needed but here is a link to the test page.
Link to the text site
Thanks.
The extra space is actually a cause of line-height. Since you are using display: inline-block; on .portfolioWork figure, line-height will have an affect on it.
Just add line-height: 0; to .portfolioWork figure and it will fix the issue.
Your CSS definition will look like this:
.portfolioWork figure {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 14 days ago.
Improve this question
I want to make the box with left color bar like this
At first I should use the border-left property and change the color of one edge of the box.
However the boundary of each edge will not be 90 degree 45 degree.
How can I make this?
Here's a starting point, feel free to add additional details in the comments, because it's a bit hard to understand what you're after.
.example {
height: 40px;
background-color: #F7F8F8;
border-left: 6px #FE2A45 solid;
}
<div class="example"></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
The website I'm working on has a div on the right showing code examples in the hero section of the homepage. We use a similar div on one of our landing pages (https://buttercms.com/l/ruby-blog-software/) but the bottom of the div doesnt have rounded borders.
I can't figure out why the landing page div doesnt have rounded borders but the homepage div does.
It only did it at certain breakpoints and only on one of my monitors.
The <pre> only showed up on the same breakpoints the border was wrong
The solution that worked for me was
body.landing_page .code-examples .code-container .code pre {
margin: 0;
border: none;
border-radius: 5px;
text-align: left;
min-height: 320px;
}
The original border radius was 0px
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
so I'm new to CSS and HTML. I'm in the process of modifying a basic code for my blog on Tumblr, and I noticed that only two posts don't overlap my sidebar. I don't know what's wrong or how to fix it. Please help.
Here's my blog, so you can see what I mean: X
Here's my code, in case that helps: X
Thank you.
There is an iframe inserted at the middle of the contents. please remove that, and the layout fixes.
You should set the margin for the #posts
div#posts {
margin: 60px 0 60px 450px;
padding: 20px 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a link in a and it isnt lining up. You can view it here http://104.236.190.78/technology/
I added this css to try and shove the links down:
a{
padding-top: 3%;
}
I also tried that used 30px and it also didnt work. Any help is appriceated. Thanks.
Your screen.css (bootstrap) has a line-height:1em for some reason, this css should override it.
Add this to your CSS
body .content a {
line-height: 0;
}
Try this
a{
line-height: 33px;
}
In your html document (line 480) you are globally styling your anchors with the following code a{line-height: 33px;} which is causing your footer link to be misaligned. Take a look at the code and make some adjustments or delete it if it unnecessary.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm stumped as to what is causing this. I have duplicate sites but in one of them, I have a table that is causing my site to scroll left and right.
Using Web Developer Toolbar, I am able to outline the table which shows the table being pushed out. See Figure 1.
And here's the link...http://goo.gl/0r2if
Furthermore, I have tried everything in Firebug to see if I can force that table to be smaller without any joy.
I've also compared it to the other site which is just a replica of this one cannot seem to find a difference.
I've also searched to see if I can find something about odd 100% widths in tables and nothing I've tried has worked either.
No doubt it is going to be a simple mistake but I think I just need some fresh eyes on this please?
Thank you!
The continue shopping link has css value width: 1083px;
<a class="continue-shopping" href="/products/">Continue shopping</a>
#shoppingcartcontents a.continue-shopping {
color: #9F1B32;
display: block;
font: 15px 'another_typewriterregular',arial,helvetica,sans-serif;
padding-top: 10px;
width: 1083px;
}
It's inside the last row of the shopping cart table, so that's what's causing it. Remove the width and it's fixed.