I've been trying to get rid of the thin gray strip that's in the middle of this page:
http://redesign.emdintegration.com/index.html
It seems to be related to the wrapper but I can't get it to disappear. Please help!
Delete this line from your CSS...
#Content{
background: url(../images/content.gif) 0 100% repeat-x; /*Delete this line*/
}
I believe it is line 129 in style-v1.css
Look at the CSS for #content. It has a background image of a gray bar and a child <div> element within has a padding of 10px.
You have a padding of 10px on the following:
<div class="container_24" style="padding-top:10px">
Remove the style, and the gray stripe will disappear.
If you can't edit the HTML, you can add the following CSS rule:
.container_24 {padding-top: 0 !important;}
On your #content you have background: url(../images/content.gif) 0 100% repeat-x;
If you get rid of it, that should take care of your issue.
look at your debugger. in class .container_24, add padding-top:0px;, and delete the inline styling. That should get rid of all top padding in that class.Best practices indicate to use seperate stylesheet for all your styling, instead of dirty, messy inline styling.
The background url for #content is the gray line. You might think it's an element, but it's an image being directed by CSS for a background image for the id="content" on the page. I imagine the section element is for the product boxes and #content is in relation to that.
You could alter the CSS to not load this (../images/content.gif) by simply adding display: none to that line on the style sheet [Line 129]
Try copying this in its place.
#content {
padding:0px 0px 0px 0px;
display: none;
}
Related
On this site http://exact-mats.myshopify.com/ we want the height of the white space above the logo to equal the height of the whitespace below it.
I can't find the CSS rule to make this happen.
I can see we need to target something in
<nav class="top-menu">
....
<div class="row">
What am I missing? What CSS do I change?
Thanks.
add
padding-bottom: 0;
for the row below the div
<div class="free-shipping">Free shipping on all orders</div>
it did work when i inspected and added padding-bottom: 0;
Remove margin bottom from label and select inside <div class="car-search"></div>
.car-search label, .car-search select {margin-bottom: 0}
Set a height to the parent div of ".large-menu-container" which is ".row" or just add another parent to it if you don't want to modify the ".row".
I set the height to 75px and it works.
When you use "height: 100%;" on an element, its parent must have a predefined height in order to work.
Then you will have to adjust the select tags with a margin/padding top
Snapshot of new CSS
Add margin-bottom: -30px; In
.top-menu .row {
max-width: 82.5rem; }
Of your exact-mats.myshopify.com css
If you are unable to change css because of using third party CSS then
add new CSS class in
1. Every page where you are showing your Logo
2. OR if you can, add this class to custom .css file.
.top-menu .row {
margin-bottom: -30px; !important }
Note: I would rather suggest increasing the height of white space above top nav so it will look better than reducing space below it.
To do above thing.
Either add following CSS.
.top-menu .row {
padding-top: 31px !important; }
i am using css for the first time and i have a small problem with image.
This is an example of my code
ul#navigation-menu li a.profile span {
width: 47px;
background: url(http://127.0.0.1:8080/mywebsite/wp-content/themes/mytheme/images/navicons/profile.png)
12px -59px no-repeat;}
The path is correct but i don't understand why it does not work since i did the same thing in Html with href and it's working perfectly. Thank you for your help.
Try giving display:block to your span.
You will also need to set the height of the span.
Span is as inline element so you can either give display:block or display:inline-block for the background image to be visible.
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
Why are there gaps in this website I'm working on? I've tried setting margins, padding etc. to 0px but nothing seems to affect it.
Edit - apologies; I screwed up the link to the website. This is now fixed.
You may have inserted some styles you have forgotten about. Judging from the pic I would assume your html would look something like this like this
<ul id="nav">
<li>Home</li>
<li>Blog</li>
<li>Gallery</li>
</ul>
<div id="something">
</div>
your nav links or list items look as if they have a margin of 5px, and your div looks like it has top and bottom margin of 20px. Try to add this to your elements your are trying to fix to troubleshoot.
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
This should override any css styles preceding that may be conflicting. If it doesn't work then we need to see code to help troubleshoot further.
[UPDATE]
You should declare a DOCTYPE instead of simply putting html tags. center tags are deprecated.
To fix your spacing try this:
#nav ul{
list-style-type:none;
margin:0;
padding:0;
/* REMOVE
padding-top:6px;
padding-bottom:6px;
*/
}
/***********************************
-- ADD
***********************************/
hr {
margin: 0;
}
h2 {
margin: 0;
}
You changed the padding and margin to 0 but added it again in your ul. The hr tag was causing some of your spacing, and the heading tag was causing the rest.
Give border zero width
style="border:0px"
or give color to check if it is border
style="border-color:red"
HR (the line) and H2 (the home title) are Block elements by default and they have a line break and margins. You should modify the margins to those elements or set the display to inline (display:inline).
Also try:
border-collapse: collapse;
border: 0;
I have the following class in my CSS style sheet:
.errormsg {
border:solid 1px Red;
padding:5px 20px 5px 20px;
margin:5px;
color:Red;
font-size:medium;
font-weight:bold;
}
When I view it in IE7, the top and bottom border is cut off the when I use this class on a span tag.
What do I need to add to get it to work in IE7?
I've noticed similar issues with this sort of thing when the Line Height is not large enough. Try increasing it slightly.
<pan> elements are going to be treated as inline elements unless you specify otherwise. Add display: block; to your CSS and go from there. The alternative would be to use a <div> to wrap the error message, since <div>s are treated as block elements by default.
Setting display: inline-block; on the <div> will fix the display issues, and the width will still adapt to the text size:
Demo
You could also spruce it up a little with a css3 text-shadow, box-shadow, and gradient with an icon from iconfinder: Demo