When I add the unordered list in the header for the navigation, it pops the header down and knocks out the text that is floated right. If I remove it, all is well. Any ideas? I have been racking my head on this one... perhaps more sleep.
http://jsfiddle.net/YVmTB/2/
Also Ideally I would like the navigation to be horizontal... but i'm not quite there yet.
Maybe you're looking for something like this?
http://jsfiddle.net/YVmTB/10/
added the 2 extra stylings to the end of the css
nav {
float: left;
}
nav li {
float: left;
margin-right: 15px;
}
This is quite a simple CSS solutions.
Just add this line to your CSS:
nav li {
float: left;
margin: 15px;
}
I added this to your CSS and it seems to look like you might want it.
nav>ul, nav>ul>li{
float: left;
}
nav>ul>li{
margin: 0 .5em;
}
Of course, an example of how it should look would be nice, but maybe this will help.
Related
I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.
This page and this page have a space over the header. They just appeared after an update but I am missing where the problem could be.
Note: This only happens in FireFox.
The first thing I'd check is whether your markup's valid. According to the w3c validator, you've got an unclosed div somewhere. In my experience that's exactly the kind of thing that'll cause different presentation in different browsers.
.column, .columns {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
In this class float:leftinside is redundant, remove he is normal. and the two class to write it separately. like this:
.columns {
margin-left: 10px;
margin-right: 10px;
}
.column{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
I would remove the columns or entire sixteen columns class from header, it has no use there, only a small left padding for the logo, that's all what you'll miss. Now it's in conflict with .columns css styles.
Or you could rewrite the css for that class that would apply only for header.
After removing columns class in chrome and ff on mac:
Just found the issue. I had
#artists {margin-bottom: 40px}
#album-design {margin-bottom: 40px}
I changed it to:
#artists {padding-bottom: 40px}
#album-design {padding-bottom: 40px}
I know this is the issue because it was only happening on the portfolio and music page, the only two pages with that particular CSS.
Anyone out there care to check it?
Thanks for all of the answers. Most let me know of other issues I will fix.
Thank you all.
Remove margin-top: 16px; from #header.
Also reduce padding-top: 5px; from #header .inner,
.column, .columns in this class float:left; and display:inline causing problem... please try to remove those two properties but it may effect in some other places.. do one thing in the header id place the float:none; so it will effect only for header.
#header {clear: both; display: inline-block; float: none; margin-top: 16px;}
I have a page that displays correctly in Chrome, but not Firefox or IE. It seems that an element that has display:none is taking up space & forcing some text to the right.
http://flybysouth.com/faqs/
This is a WordPress site, and I am using a premium theme with my own customization. I have applied the following custom css in an attempt to remove the header-wrapper from the page. I know it's overkill; I must be chasing the wrong element...
#header-wrapper,
#leader,
#leader .margin,
#leader .margin h1 { display:none; margin: 0; padding: 0; width: 0; height: 0; }
Any ideas what is causing the space in front of "What makes it white?" Thanks!
It looks like you might have an uncleared float somewhere above the main content area, try adding clear:both; to #main-col:
#main-col {
clear: both;
margin-top: 20px;
}
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):
Something seems to be breaking the display of lists (ul and ol) in IE7. They work fine in IE8, FF, Safari etc but not IE7 and IE6.
I just want them to be displayed normally: ul lists should show bullet points and ol lists should show numbers.
I've narrowed it down to the first 1000 lines of code in styles_layout.css... ;)
Actually, I believe it has something to do with the following styles:
* { margin: 0; }
html, body { height: 100%; }
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px;
}
Have a look here: http://www.olvarwood.com.au/olvarwoodonline/mod/forum/discuss.php?d=2, login as a guest
IE7 and below style ul elements like this:
ul {
margin-left: 40px
}
Good browsers style ul elements like this:
ul {
padding-left: 40px
}
It's better explained by Eric Meyer here:
https://developer.mozilla.org/en/Consistent_List_Indentation
and the section "Finding Consistency" will tell you what you do.
This is because the ul/li elements have inherited the zero-margin property.
I solved it myself through trial and error:
* {
margin: 0;
}
This stops Ol's and Ul's from displaying properly in IE7 and IE6. I have no idea why...
I won't even pretend to be an expert on css, I get my butt kicked by it all the time, but I just happened to run into this, although my situation was a bit different.
I ended up having to specify a class tied to ul and set the list-type.
.classname ul { list-style disc inside }
Try that and see if it helps.