I have 3 divs that show correctly in chrome firefox, but, in IE, they aren't showing in the same way...
I want to display something like this
but, in IE7,IE8,IE9, I am getting:
I added the code to jsfiddle and ran it on IE and seemed to be ok, but in server it is displaying as in the above image...
What could be wrong, is there a line of code that is missing to IE?
Please take a look at my fiddle
http://jsfiddle.net/QcayB/2/
this is html
<div id="wrapper">
<div id="header">
<img src="http://www.astrosurf.com/re/tse_20060329_earthshine.jpg" width="500" height="478" alt=""/>
<h1> </h1>
</div>
<div id="main">
<div id="col_izq">
<p>
</p><div id="usa">
<a id="usajq" href="#"><span class="textots">left</span></a>
<a id="usajql" href="#"><span class="textotsl">left</span></a>
</div>
<p></p>
</div>
<div id="col_medio">
</div>
<div id="col_der">
<p>
</p><div id="mexico">
<a id="usajq" href=""><span class="textotst">right</span></a>
<a id="usajql" href=""><span class="textotslt">right</span></a>
</div>
<p></p>
</div>
</div>
</div>
You may have something like this on your page?
<meta http-equiv="X-UA-Compatible" content="IE=7">
X-UA-Compatible may also be being sent by your server in the response header.
Related
I've been trying to make a Github image link and a Patreon image link show up side by side together. After some searching I found out about black magic called flex, but It's now super spaced apart and I don't want that. How would I fix this? (Code and Images below)
HTML:
<div class="promotion">
<div class="column">
<li><a href="https://github.com/noprojects/noprojects.net">
<img src="img/github.png" style="width:15%"></a></li>
</div>
<div class="column">
<li><a href="https://patreon.com/noprojects">
<img src="img/patreon.png" style="width:15%"></a></li>
</div>
CSS:
What's happening:
I'm not sure why your list item <li> tags aren't in a list tag <ul>.
<div class="promotion">
<div class="column">
<a href="https://github.com/noprojects/noprojects.net">
<img src="img/github.png" style="width:15%">
</a>
<a href="https://patreon.com/noprojects">
<img src="img/patreon.png" style="width:15%">
</a>
</div>
</div>
Then add the .promotion li css values to the .column class.
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I have image buttons that change appearance on hover by changing the content of the image in CSS. Not sure if that is part of the problem but for some reason when I click on my image link nothing happens.
Here's the code I am using:
<div class="hub-background">
<div class="hub-container">
<article class="btn-twitch">
<a href="twitch.tv/destifly">;
<img src=" ***** "> </a>
</article>
</div>
</div>
You need to put the article inside of the anchor tag
<div class="hub-background">
<div class="hub-container">
<a href="...">
<article class="btn-twitch">
<img src="...">
</article>
</a>
</div>
</div>
With this snippet of HTML, the topmost google link is included in every element under it when shown in Firefox and Chrome.
<div>
<a href="http://www.google.com/">
<div>
<div>
<div>
<div>
<a>a tag</a>
</div>
<img />
<h3>a title</h3>
<p>a description</p>
<div>a detail</div>
</div>
</div>
</div>
</a>
</div>
What is causing this parsing issue and how can I fix it?
Try dropping the following document into the W3C Validator:
<!DOCTYPE html>
<html>
<head>
<title>Parse error?</title>
</head>
<body>
<div class="g23">
<a href="http://www.google.com/">
<div class="article-bg">
<div class="splash-border-right">
<div class="splash-content-margin">
<div>
a tag
</div>
<img src="http://www.google.com/image.jpg" />
<h3 class="splash">a title</h3>
<p>a description.</p>
<div class="read-time">a min</div>
</div>
</div>
</div>
</a>
</div>
</body>
</html>
Observe that this document is not valid HTML5. The first error:
Line 13, Column 65: An a start tag seen but an element of the same type was already open.
That is, a tags must not include other a tags. According to Alohci in the comments, Chrome and Firefox's behavior matches the HTML5 spec's adoption agency algorithm for this scenario. It's funky, but, with invalid code, funky results are to be expected.
I'm trying to load the bootstrap media object inside a span3 div.
Everything works, apart from the image. I've checked this link elsewhere and it has no issues.
Any suggestions
<div class="container">
<div class="row">
<div class="span3">
<div class="pull-left">
<h3>Top Devices</h3>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="<?php echo base_url(); ?>resource/img/devices/Asus-Nexus-7.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
</div>
</div>
</div>
If it's just a regular image you are loading into the span3, is there a reason why you are using data-src and not src ?
Or if you are also using something like foresight.js, for example, see if this post helps you
Good luck!
Check the source code out, probably it will gives you the answer.
I think you should add an slash:
data-src="/resource/img/devices/Asus-Nexus-7.png
instead of:
data-src="resource/img/devices/Asus-Nexus-7.png
Grretings