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.
Related
It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.
I've tried for hours to fix it, but nothing works everywhere.
Chrome, mac OS X:
(source: d.pr)
Chrome, Windows 8
(source: d.pr)
IE 10, Windows 8
(source: d.pr)
So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.
Here's the code:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
and the HTML (pretty simple) :
Want more ?
and the site: http://aurelieremia.be/tfa/
// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)
I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.
If this sounds like something you'd consider you can check out the solution here
Leave :after in static .
vertical-align to middle or explicite value (depends of where really stand arrow in svg/img).
white-space:nowrap to parent box to secure, but not necessary:
http://codepen.io/gcyrillus/pen/vzrGj
How about something like this:
HTML:
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS:
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
Fiddle here: http://jsfiddle.net/MQHVE/3/
The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.
I have used font-size: 0; on the parent element and that's how I got the links to have no spaces but the space is still there in Firefox.
Please test this in Firefox and then any other browser and you'll see that Firefox is showing a space (albeit 1px) between the links where as no other browser is doing this... well IE6&7 but lets not talk about them...
http://jsfiddle.net/uZMzA/
Does anyone know why? And how I could go about and solving it without using javascript to determine the browser?
The reason why this is happening is because there is a text-node with a line-break in between the a-tags. And since you have set letter-spacing: 1px; and the firefox coders have chosen to implement letter-spacing the way they have, you get 1px of letter spacing after or before that textnode.
The solution, as already hinted at elsewhere, is to change the rule for div#navigation to not have the line letter-spacing: 1px in it, like this:
div#navigation {
position: relative;
padding: 1px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Georgia, Serif;
margin: 0 auto 2px auto;
width: 400px;
font-size: 0;
text-shadow: 0 1px #fff;
}
You can see a working version with the fix applied here: http://jsfiddle.net/uZMzA/10/
maybe you mean:
letter-spacing: 0
This cause your "bug"
Edit:
If you want the letter spacing at 1px, this is a good solution, fiddle up
Just adding:
display: inline-block to the Div container css and float: left to the a element.
Read this post. You will find all available techniques on its body and comments, as well as their tradeoffs.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The "remove the spaces" option is mentioned first, as it's the easiest to implement. But it's also "a bit funky".
The "letter-spacing - based" option is listed in the comments, but notice that you will have to include additional css if you want to make IE < 8 happy.
Simply remove the white space from your code like this jsFiddle example.
HTML:
<div id="navigation">
Link1Link2Link3Link4
</div>
This is silly and I can't really explain the "why" of that occurrence but here are two ways to correct the display.
FF doesn't like the space in the code. Either remove the carriage returns between your <a> tags or comment them out, like this:
<div id="navigation">
Link1<!--
-->Link2<!--
-->Link3<!--
-->Link4
</div>
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.
I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.
The following resource seemed to be exactly what I need:
http://www.css4you.de/Texteigenschaften/vertical-align.html
and
http://www.css4you.de/example/vertical-align.html
Here's my HTML:
<div style="border: 1px solid purple;">
<h1 style="border: 1px solid red; display: inline;">Textext</h1>
<span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;">Log In</span>
</div>
The CSS ID selector for logindisplay doesn't exist. h1 is just
h1
{
font-size: 18pt;
}
I basically did everything as in the resource above, but it doesn't work - neither on IE9 nor on FF. Here's what I get:
Does anybody know what I'm doing wrong?
Note: Workarounds/hacks aren't desired. (One would be to set padding-top: on the span...)
Try this
#logindisplay { line-height: 18pt; }
...and get rid of your vertical-align property.
vertical-align doesn't work in the way you thinkit does, it seems. Take a look at http://css-tricks.com/what-is-vertical-align/ for a good explanation of what it does.
Using float:right negates the vertical-align as you found. Mark's suggestion doesn't work with position:relative on the div? In which case, line-height seems like the easiest way.
make your outer div be display: table-cell, or give it a line-height of appropriate size.
vertical-align is one of the stupidest bits of CSS, and rarely works as you'd expect without having to hack up containing elements: http://phrogz.net/css/vertical-align/index.html
A different approach would be putting position relative on the parent div and then absolute position the span like this:
#logindisplay {
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
Example
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }