IE is driving me crazy - once again. In the real application I want to have an image on the left, some links on the right and the standard text in between. The example below just has 3 divs inside another one, but it is sufficient to show the problem.
The example has 2 times the same construct. One time bare, one time encapsulated in a list. Firefox shows
|Left text|Center text<-->|Right text|
, the list indented, but generally the same.
IE8 shows the same for the bare construct. But for the encapsulated code things go awry:
|Left text|<-->|Right text|
|Center text<--> |
with the upper gap being yellow, i.e. the containing div.
Since to me CSS behaviour is not always intuitive, I'd like to know whether my code below collides with any standards. And if it is sufficiently conforming, is there any way to help IE8 to render it as intended?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Test for IE</title>
<style>
.meta-left {
float: left;
background-color: red;
}
.meta-right {
float: right;
background-color: blue;
}
.meta {
background-color: green;
}
.meta-container {
background-color: yellow;
}
ol {
clear: both;
list-style: none;
}
p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
<ol><li>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
</li></ol>
</body>
</html>
try adding the http-equiv="X-UA-Compatible" content="IE=edge" meta tag? forcing IE to render with it's most advanced rendering engine
Have you tried floating the centre text? IE is probably doing something because it doesn’t understand where to put it. Plus, IE is crap! : )
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
I am writing a website and am having an odd problem.
#Text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
body {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<img src="someUnimportantImage.jpg" height="100vh">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
</body>
</html>
My problem is that when I load my page in google chrome (I haven't tried other browsers),
there is a mysterious white space at the top that I can't get rid of
the <html> element doesn't fill the browers height, and therefore
setting the images height="100vh" makes it fill the <html> element, but not the page.
What I need is for <html> to fill the page and for the white space at the top to disappear.
EDIT
I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.
When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.
img {
height:100vh;
}
And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.
body {
margin:0;
}
img {
height:100vh;
}
#text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.
I currently have a web page which is using tables to lay out rows of image links. The number of images per row may vary, and their dimensions may vary, yet each of them must be vertically centered across each row. Row heights therefore may vary too, depending on the tallest image in the row.
Example:
http://jsfiddle.net/LM94B/
Given the required variability of image sizes, I have no idea how to replicate this in CSS, so that all the centering is maintained (each cell is horizontally centered too). Is using tables the only way to reliably achieve this with support for IE6 onwards?
If you need IE6 support, then yes, you are better off sticking with tables. But make sure you add role="presentation" as an attribute to the <table> elements so that modern screen readers know that they're not tabular data tables and don't attempt to call them out as such to their users.
Note that role="presentation" is invalid HTML4, but doing something useful for users trumps keeping validators quiet.
That's not to say that it can't be done at all. Here's a fully HTML4 valid tableless solution that works in IE6 and the latest browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test case</title>
<style type="text/css">
a { font-size: 10pt; text-decoration:none; color: #00f; }
a:visited { text-decoration:none; color: #00f; }
a:hover { text-decoration:underline; font-weight:bold; }
.page { text-align:center }
.page .row { margin-bottom: 20px; }
.page { margin-top: 24px; }
.page a {
display:inline-block;
vertical-align:middle;
}
.spacer {
margin-left: 16px;
}
img { border:none; }
</style>
</head>
<body>
<div class="page">
<div class="row">
<img src="http://placehold.it/200x100" alt="placeholder image"><br>Link 1
<span class="spacer"></span>
<img src="http://placehold.it/150x150" alt="placeholder image"><br>Link 2
</div>
<div class="row">
<img src="http://placehold.it/180x80" alt="placeholder image"><br>Link 3
<span class="spacer"></span>
<img src="http://placehold.it/80x120" alt="placeholder image"><br>Link 4
<span class="spacer"></span>
<img src="http://placehold.it/120x100" alt="placeholder image"><br>Link 5
</div>
</div>
</body>
</html>
See http://alohci.net/static/imagerows2.htm
I'm doing a website for a school work, but when I resize the screen and make it a little wider, the div elements are getting out of their place.
How can I prevent this?
most of the divs are:
.menu {
padding-top:120px;
position:absolute;
color:white;
font-size:28pt;
font-weight:Bolder;
}
My html:
<body id="BODY" class="BDNL" onResize="MOSTRA()">
<div id="resizing" class="">
<div id="intro" class="divintro">
<p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p>
<p id="texto" class="txtcomum">
Trabalho no qual um grupo deve elaborar um site que <br />
relacione todas as matérias técnicas estudadas.
</p>
</div>
<form>
<div id="menu" class="menu">
<label>RECO</label>
|
<label>LOCO</label>
|
<label> LP1</label>
|
<label> LP2</label>
|
<label> INFO</label>
</div>
</form>
</div>
</body>
You might want to look into the min-width and width properties of CSS.
Okay. Your HTML looks quite messy.
First of all, please start indending your code for the sake of your own eyes.
<html>
<head>
<title>Page title</title>
</head>
<body class="BDNL" onResize="MOSTRA()">
<div id="resizing">
<div class="menu">
RECO|
LOCO|
[--]
</div>
<div id="intro">
<p>
<h1>Trabalho Interdisciplinar Orientado</h1>
[..]
</p>
</div>
</div>
</body>
</html>
This is the minimal HTML-source you need to achieve the structure you desire.
Why exactly are you using position:absolute; on the .menu, I guess you want it to be positioned on top of the actual content?
I moved the .menu above the #intro container.
Use the following CSS to achieve the result you may want:
.menu {
margin: 0 0 30px 0; /* bottom margin 30px */
}
.menu a {
margin: 0 20px; /* left, right margin 20px; top, bottom 0 */
}
Also
please decide wether you want to use classes or IDs on your elements, in most cases you won't need both,
get rid of redundant classes and IDs (<p class="p"> or <p id="p"> do not make sense),
use the propper html elements for your content. Use <h1> - .. tags for headlines instead of differently styled paragraphs.
Make yourself familiar with CSS Margins and get rid of multiple .
As mentioned in your other question, you might want to give your elements (for example .menu) a fixed (min-)width which prevents the element from getting too narrow:
.menu {
min-width: 300px;
}
<pre><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
.back{width: 1000px;height: 1000px;z-index: 1;position: fixed;top: 0px;
left:0px;opacity: 0.5;filter: alpha(opacity=50);background-color: Black;}
#main
{margin: 100px 0 0 100px;width: 500px;position: absolute;background-color: Aqua;}
#div1 {background-color: yellow;z-index:2;position: relative;}
#div2 {background-color: yellowgreen;}
#div3 {position: relative;}
</style>
</head>
<body>
<div id="main">
<div id="div1">
<div>
<input value="0000" />
</div>
</div>
<div id="div2">
<div>
<input value="1111" />
</div>
<div class="back">
</div>
</div>
</div>
<div id="div3">
<input value="222" />
</div>
</body>
Hi all, i need overlap all with div class='back' except div2, but IE7 show div3 too. It should look like popup. Alternative is to clone div2 and append it to body, but i dont like this idea.
There's a z-index bug in IE7 when using relatively positioned elements. There's a non-JS solution you can try (Not easy though because of the makup), but there's also an easy JS solution for that.
You can see a working example in this fiddle.
The jQuery function goes like this:
if (document.all && !window.opera && window.XMLHttpRequest) {
$(function() {
var zIndexNumber = 1000;
$('div,p,li').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
It checks if you are on IE (You could just call the script using conditional comments), and if so, it loops through the divs setting a lower z-index each loop.
Now your input box is behind .back in IE7.