I'm a designer not developer "so mind the question if its too basic" and i was updating my word-press version.
www.majd-design.com
After updating my word-press version i got extra margin in my inline element{},
element {
float: left;
top: auto;
right: auto;
bottom: auto;
left: auto;
margin: 0px 0px 10px 25px;
overflow: hidden;
position: relative;
width: 930px;
height: 516px;
}
Can anyone advice how can i get rid of it, as this code isnt in CSS files or in the HTML index file.
Thanks
Adding !important to the end of a css attribute declaration will tell the browser to make sense of it and not to any other declaration of the same attribute, also when the other declaration has more priority than yours (and also inline css ;)).
You can use it like this:
margin: 0px 0px 10px 25px !important;
Alter the CSS file. If it's core to a theme or WP then you can also...
Create a child theme. https://codex.wordpress.org/Child_Themes
Get a custom CSS plugin and override the CSS. https://wordpress.org/plugins/simple-custom-css/
element {
margin: 0 !important;
}
you might need to add more detail but i think its probably this section of the CSS
margin: 0px 0px 10px 25px
When its in shorthand like this it means:
top margin is 0px
right margin is 0px
bottom margin is 10px
left margin is 25px
Let me know if this solves your issue
Using javascript , you can do
document.getElementById("myDivsId").style.margin = "0";
or
document.getElementById("myDivsId").style.marginLeft = "50px";
(similarly for all 4 sides)
JsFiddle
Related
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
I have just found out that my forms on these pages are not working.
http://www.abado.dk/modtag-tre-tilbud/
http://www.abado.dk/kontakt/
http://www.abado.dk/bliv-partner/
I really don't have any idea what is wrong.
Can anyone help me?
The issue is on your padding: 25px 15px; in .form-control
you in put height is 34px at the same time you are using padding-top(25px) + padding-bottom(25px) = 50px with in the 34px
Add this in to css properties
.form-control{
height: auto;
}
or adjust padding value
Can someone tell me why my div brdheader isn't sitting at the top (the most top inside of, that is) of punwrap?
I'm using fluxbb, and the devtools in chrome aren't saying anything. There's no margin, or padding, so I have no idea what the problem could be.
This is the forum. Since I'm using FluxBB I can't exactly post all of the code.
http://flux.strange-coast.com/index.php
Thank you for taking the time to read this.
you have margin: 30px 0px -10px 5px on your .pun h1 that's what's doing it. Adjust that to what you want
Change your .pun h1 css line in your BSTangram.css on line 127 to the one below should fix it.
.pun h1 {
margin: 0px 0px -10px 5px;
margin-left: 5%;
padding: 0px;
}
As long as your going for this output, http://cl.ly/TGxf
If that's the case then there is your fix if not sorry I misunderstood.
Please bear with me as I'm fairly new to hand coding my web pages. I applied my CSS and HTML from the website I created to skin a Blogger page to match look and feel. Everything appears fine when testing in FireFox release 17.0.1, but the background for my div #body_wrap fails to repeat more than a few times in IE 8.
I'm probably missing something simple, but I would appreciate any help in determining the cause. I would like to know if it's IE related or just poor code that FireFox is picking up the slack on.
Here is the link to the blog:
http://www.zenmotostore.blogspot.com/
Here is the CSS for the div containers involved:
#body_wrap {
width: 1074px;
margin: 0px auto;
padding: 0px;
position: relative;
background: url(http://www.zenmotostore.com/images/repeat_bgd_shadow_blog.png) top repeat-y;
clear: both;
}
#body_content_wrap {
width: 984px;
margin: 0px 45px 0px 45px;
padding: 0px;
padding-bottom: 7px;
background: #000000;
position: relative;
clear: both;
}
#scrollofzen_header {
width: 983px;
height: 191px;
margin: 0px 0px 0px 0px;
padding: 0px;
background: #000000 url(http://www.zenmotostore.com/images/scroll_of_zen_header.jpg) top center no-repeat;
position: relative;
clear: both;
}
The div #scrollofzen_header sits above the Blogger content code in the HTML. Both are contained in the #body_content_wrap div.
Let me know if I need to include more code here on the post. Thanks in advace for any help you might have!
Your problem seems to be with this CSS declaration:
.body-fauxcolumn-outer
{
background: url(http://www.zenmotostore.com/images/page_bgd_zen.jpg) #b8924f fixed no-repeat 50% top;
}
If I use the IE dev tools to disable this rule then the page seems to work fine (as I expect it to anyway).
Looks like it might be a clear issue. Depends on version of IE. You could look into css height: 100%;, or another way would be to add <div class="clear></div> as the last child element in #body_wrap.
.clear {
clear: both;
}
//then the markup
<div id="body_wrap">
//Your content and stuff
<div class="clear"></div>
<div> //close body_wrap
Internet explorer has a big problem with using images in css. Whenever I try to use them it doesn't work. Not since the very latest edition of IE have they allowed background-images.
You need to define a height for the div that you want to have a background-image
Background Images aren't supported IE8 or below
http://www.w3schools.com/cssref/pr_background-image.asp
I've got an interesting box-model problem here. I have a header full of links, and for some reason my 0px margins are ignored and appear as 2px margins surrounding each link.
I've set up a test page at http://www.gimmesomeoven.com/test.htm to illustrate the problem. Each link in the header should be a 56px square link with a 1px border and 2px between each link (instead of 4 as it displays). In this case, I've had to set up negative margins on each link, but that is certainly not ideal case.
For some reason, things will not render correctly. Plus, this solution only works in modern browsers: IE8, Chrome, FF3+ (thanks browsershots.org..)
Any help on this would be greatly appreciated. It's been proving much more difficult than I anticipated.
I think the problem is that you have spaces between each <a>. Try floating them left to squash the spaces, unless you want to put all that code on one line in your HTML. You should be able to get rid of the negative margins then too... you shouldn't need them here.
Use display: block instead of floating them.
Add these properties to your <a> tag for cross-browse inline-blocks:
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
Here's what I was able to do to fix your markup:
Delete this style rule:
#recipes a {
padding: 0;
margin: 0 -2px -2px 0;
border: 1px solid #fff;}
Modify the .img style as follows:
.img {
width: 56px;
height: 56px;
background: url(images/header_test.jpg) no-repeat;
display: inline-block;
padding: 0;
margin: 0 -2px -2px 0;
border: 1px solid #fff;}
It looked like the two different style rules were affecting the exact same group of elements. Also, make sure that the text between the anchor open and close tags is at least a hard space, as in:
<a class="img" href="#"> </a>
Seems the display: inline-block is causing these. Any specific reason for this?
I tried (thanks to firebug)
making the margins to 0 for #recipes a
changing display: inline-block to display:block for img
adding float: left to #recipes a
and this seems to be the desired solution.