I am attempting to make a simple column system I can use on a site and embed into any element that is cross browser and easy to use. I am trying to do this with pure CSS if at all possible. Everything works except the borders don't line up.
Everything I've tried to do hasn't worked.
View the css here:
http://jsfiddle.net/JamesKyle/8H7hR/
Script Version:
http://jsfiddle.net/JamesKyle/8H7hR/3/
You use display:table-cell for your span like this:
.columns .col {
display: table-cell;
position: relative;
width: 49.9999%;
text-align: justify;
border-left: 1px solid #ccc;
background: #f5f5f5;
}
Check this fiddle http://jsfiddle.net/8H7hR/5/
Here's an article that should help: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Related
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
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.
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I wonder if anyone has a solution for this. I want a grid of images 6 columns by two rows. At the moment it works fine: http://oaeyewear.4pixels.co.uk/brands.html
and I'm using:
.gallery {
list-style-type: none;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
margin-right: 0px;
}
But I know IE8 won't recognise the nth-of-type selector. Is there a way of
Make IE8 play along. Selectivizr won't do this with jQuery and
I don't want to introduce another library
Using some other conditional CSS just for IE8
javascript?
Ideally the solution needs to work responsively as the site is based on the Foundation Framework. At the moment it works well as it sizes down to two columns and I can just change the <li> with a media query to work across 300px.
In this case I would use a negative margin approach.
.gallery {
list-style-type: none;
margin-left: -26px;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-left: 26px;
}
You could try using ie7.js | ie8.js | ie9.js instead of Selectivizr.
That does support adding nth-of-type for IE, without needing any other libs.
On the flip side, it also implements a whole raft of other features and fixes into IE, which may or may not be what you want. If you're using other polyfills, you'll need to check that it doesn't conflict. It's worth trying though.
I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).