For simplicity I've created my style in the document to highlight my problem. I have a row of 4 links that are styled to look like button. The Next link (the 3rd item) I am hiding using css. In IE8+, Chrome, Firefox it works perfectly but in IE7, there is a gap between the Cancel and Accept button (where the Next button would be).
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.ButtonBar
{
margin-top: 20px;
text-align: center;
}
.LinkButton
{
background-color: #01699b;
border: 0px solid;
border-radius: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 0px 11px 0px 11px;
overflow: hidden;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 28px;
}
.NextButton
{
display: none;
}
</style>
</head>
<body>
<div class="ButtonBar">
<a class="PreviousButton"><span class="LinkButton">Previous</span></a>
<a class="CancelButton"><span class="LinkButton">Cancel</span></a>
<a class="NextButton"><span class="LinkButton">Next</span></a>
<a class="AcceptButton"><span class="LinkButton">Accept</span></a>
</div>
</body>
</html>
If you remove all CSS from the .LinkButton class apart from background-color it does the same, I was just including it all to show what I am doing so far.
What should I do to fix this issue?
Didn't you ever wonder where these spaces actually come from?
It's the linebreaks between your inline-elements <a> causing a gap.
<div class="ButtonBar">
<a class="PreviousButton">...</a> <!-- Linebreak! -->
<a class="CancelButton">...</a> <!-- Linebreak! -->
<a class="NextButton">...</a> <!-- Linebreak! -->
<a class="AcceptButton">...</a> <!-- Linebreak! -->
</div>
Now the modern browsers collapse multiple of these, but IE7 does not, so you have actually 2 linebreaks between your elements, causing the gap to be double as wide.
You have several solutions to this:
1) Floating the elements
2) modifying markup:
<!-- end tag on the new line -->
<a>...
</a><a>...
</a>...
<!-- comments in between -->
<a>...</a><!--
--><a>...</a>
<!-- all on one line -->
<a>...</a><a>...</a>
<!-- In some cases (e.g. list elements) you can skip the end tag -->
3) Modifying font sizes
4) Using negative margins- but that could cause issues in older browsers.
What solution you want to take is up to you.
For your special case, where you just hide the element in question you could either declare absolute position or any float on that element.
One solution is to add float:left ONLY to the .NextButton css class. This should work.
Related
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
In short.
I have something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
.vertical_panel > .fields > .item {
display: block;
background-color: #344;
}
.horizontal_panel > .fields > .item {
display: inline;
background-color: #FAE;
}
.item {
width: 100px;
height: 50px;
margin: 2px;
}
.fields {
margin: 0px;
padding: 0px;
}
#specialSpan {
display: table;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="horizontal_panel" id = "specialSpan" style="width: 300px; height: auto;">
<fieldset class="fields">
<span class="vertical_panel item" style="width: 300px; height: auto;">
<fieldset class="fields">
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</span>
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</div>
</body>
</html>
It's an approximation to my code structure. There are more elements inside the fields. So, I have a javascript function which toggles class of panels.
The problem is: I have correct selectors, correct values of style are set(display), but Internet Explorer 8 does not apply it correctly. The items does not change their direction if I call that function. Under “does not change direction” I mean that items does no rendered as display: block or display: inline.
There is a key part: if I open debug tools and enter display: inline for instance manually for panels, almost everything looks fine. But if I have correct view before manual style changes and I have changed the style, I can't change view back to normal in ordinary way — with call of function.
The function is something like:
function SetPanelOrientation(panel) {
// this attribute doesn't exit in example but actually exist in project's code
// and always correct
var isVertical = panel.getAttribute("IsVertical");
if (isVertical == '0') {
$(panel)
.removeClass('vertical_panel')
.addClass('horizontal_panel');
} else {
$(panel)
.removeClass('horizontal_panel')
.addClass('vertical_panel');
}
};
I can see in debugger tools that class changed, but view doesn't change. I've tried many combinations with block and inline-block but have not found working combination.
Due to the doctype you are using, you are in quirks mode, and IE will perform as if it were 1998 all over again. New web pages should not be using that doctype since 1999.
The only way around this is to set the element's CSS properties to how you want them to be versus how other browsers are correctly displaying them.
There was nothing in doctype, nor in property values. Set styles with jquery instead of css file helps.
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
If you're running the latest Chrome Canary build, that could be the problem. All of my extension's popups are showing up like this.
Try on a different build of Chrome?
EDIT: Yeah, I just found some bug reports for Chrome/Chromium:
https://code.google.com/p/chromium/issues/detail?id=180724
https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/09xiPfAfrIc
Set the height and width properties in your html body tag. Means, simply add style to your existing body tag with height and width properties.
I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line:
How do I achieve this in CSS? Here's the HTML file to play with:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.
That should work.
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.
Your span, input and button need the property:
vertical-align:middle;display:inline
Had anyone got a problem with a:hover that has position: absolute and is above <img> under IE & Opera
a:hover has background, but <a> hasn't, both has display: block.
Thank you in advance for your help
...
To see the problem please check this webpage:
http://bckp.eu/test.html
or
use this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
border: 1px solid black;
position: relative;
height: 200px;
width: 500px;
}
a.next {
right: 0;
}
a.prev {
left:0;
}
.withbackground {
background: yellow;
}
.nobackground {
background: transparent;
}
a.link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border:0;
}
a.link:hover, a.link:focus {
background: url(/img/comment.gif) repeat !important;
}
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<p>Doesnt work under IE? Add background | This is not quirks mode #</p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<div> <a class="link nobackground" href="#"><a> without background, without img</a> </div>
<script type="text/javascript">
function a() {
document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
}
function quirks() {
alert(document.compatMode); return false;
}
</script>
</body>
</html>
This is one seriously wacky bug. Now, if you really must organize your html the way you have, then IE needs to have the following placed inside the a tag to get it to register with the image.
<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>
But this would be better (have not tested completely across browsers). Organize the html like (no need for a wrapper div):
<a><img /></a>
Make sure the a is not position: absolute (IE7 didn't work with it so), and then set the image to:
img {position: absolute; z-index: -1}
I hope these head you in a direction to solving your problem.
Scott, thank you for your answer. This is just example of the problem.
Of course my real code is bigger than that:
- 2 tags to navigate prev/next (so I cant put <a><img></a>)
- both 's has but with display: none (<a><span>prev</span></a>). display: block doesnt help
z-index doesnt help. position: absolute works, when <a> has background.
I cant have filter: alpha(opacity=0) or opacity=0 because not every browser supports that.
I found odd solution that solves the problem, but dont want to use it: a {background: url(filedoesnotexists);} or i can use for example transparent 1x1 gif file but i would like to find reason of my problem.
Solution with img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;} works exactly the same - no hovering without background above img for ie & opera
I also met another odd thing with that in my main code - will try to reproduce it. (EDIT below)
This is another strange problem - IE works, but only when it has another "layer" and mouse is hovering above this layer. Opera works fine in every case:
http://bckp.eu/test2.html - click Exif info and move mouse over image/new "layer"