I've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I am new to CSS/HTML and I am having some trouble adjusting the width of my page. I'm sure the solution is very simple and obvious lol.
On this page: http://www.bodylogicmd.com/appetites-and-aphrodisiacs - I am trying to set the width to 100% so that the content spans the entire width of the page. The problem I am running into is that when I try to add inline CSS, the external stylesheet called in the head is superseding the inline. I am using Joomla, so the editor let's edit the body, not the head (unless I create a custom module that rewrites code for the head).
I do not want to re-write/edit the external (main) stylesheet, since I am using this page for a contest and it is only running for about 1 month.
Anyone have any ideas how I can achieve this using inline CSSS and what the code would be?
Any help is greatly appreciated!!
#main, #content, .landing-wrapper, #column2 .box2 {width: auto;}
#column2 {width: auto; float: none;}
You should be able to place this in the head of your template's index.php, though I would personally add it to the bottom of the theme's main stylesheet. How long it's there isn't a factor.
you need to find the #main selector and set it wider there. The body is always going to be 100% wide unless you explicitly set it otherwise. In your case the #main container is the wrapper around the whole page, this is what you want to set. I'd also recommend looking up the "box model" and understanding how that works before going too much further. It will save you much weeping and gnashing of teeth. http://www.w3schools.com/css/css_boxmodel.asp
try adding inline .css {width: 100%; (or auto)} to :
- #main
- #content
- .landing-wrapper
- #column2 .box2
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }
Ive used the following css code to align my form elements:
form { position:relative; }
form input { position:absolute; left:11em; }
However, the textarea element is not aligned correctly with the rest of the elements. I tried the following, but that didnt work
form input,textarea { position:absolute; left:11em; }
Any way to fix this ?
Thank You.
No-one is going to be able to solve this without seeing the current result; I generally avoid absolute positioning as a rule unless doing something particularly complicated like tooltips, can you not achieve what you want using margins?
It looks like this is a Firefox, em-specific bug.
I think it's related to this bug about Firefox textareas and its font: Mozilla 3.0.8 and Chrome height in em bug workaround
Your positioning should work if you add the following code:
form { font: 11px Arial; }
form textarea { font-size: 100%; font-family: inherit; }
Also, another workaround is using pixels instead of em's.
This does not address your question, but why not use "text-align"? Absolute positioning to place form elements sounds a bit odd in my ears.
If you must use absolute positioning in this way, have you considered using margin instead of left? As the others have pointed out, it's difficult to troubleshoot your problem without more information.