I have a current template where my images are arranged in 3 columns (a right, a centre, and a left). It all appears great in IE7, but when I checked it in FF the central column had joined the left column.
This is how I want them to appear:
http://www.pawsforwildlife.co.uk/index.php?q=line_prints.html
My code for that particular area is
<div id="Printcontainer">
<div id="Lineprints">
<h4><u>Tiger</u></h4>
<ul><a href="assets/images/line prints/tiger.png"><img src="assets/images/line prints/tiger - small.png"/></a></ul>
<h4><u>Smilodon populator (extinct)</u></h4>
<ul><a href="assets/images/line prints/Smilodon populator.png"><img src="assets/images/line prints/smilodon populator-small.png"/></a></ul><br>
<h4><u>Smilodon californicus (extinct)</u></h4>
<ul><a href="assets/images/line prints/Smilodon californicus.png"><img src="assets/images/line prints/Smilodon californicus-small.png"/></a></ul>
<h4><u>Leptorycteropus guilielmi (extinct)</u></h4>
<ul><a href="assets/images/line prints/Leptorycteropus guilielmi.png"><img src="assets/images/line prints/Leptorycteropus guilielmi-small.png"/></a></ul>
<h4><u>Giant Pangolin</u></h4>
<ul><a href="assets/images/line prints/Giant pangolin.png"><img src="assets/images/line prints/giant pangolin-small.png"/></a></ul>
</div>
<div id="Lineprints2">
<h4><u>Giant Short-Faced Bear</u></h4>
<ul><a href="assets/images/line prints/Giant Short-Faced Bear.png"><img src="assets/images/line prints/Giant Short-Faced Bear-small.png"/></a></ul>
<h4><u>Piranha</u></h4>
<ul><a href="assets/images/line prints/Piranha.png"><img src="assets/images/line prints/Piranha-small.png"/></a></ul>
<h4><u>Fieldfare</u></h4>
<ul><a href="assets/images/line prints/Fieldfare.png"><img src="assets/images/line prints/Fieldfare-small.png"/></a></ul>
<h4><u>Degu</u></h4>
<ul><a href="assets/images/line prints/Degu.png"><img src="assets/images/line prints/Degu-small.png"/></a></ul>
</div>
</div>
<div id="Printcontainer2">
<div id="Lineprints3">
<h4><u>Smilodon fatalis (extinct)</u></h4>
<ul><a href="assets/images/line prints/Smilodon fatalis.png"><img src="assets/images/line prints/smilodon fatalis-small.png"/></a></ul><br>
<h4><u>Bottlenose Dolphin</u></h4>
<ul><a href="assets/images/line prints/Bottlenose dolphin.png"><img src="assets/images/line prints/Bottlenose dolphin-small.png"/></a></ul><br>
<h4><u>European Cave Bear (extinct)</u></h4>
<ul><a href="assets/images/line prints/European Cave Bear.png"><img src="assets/images/line prints/European Cave Bear-small.png"/></a></ul><br>
<h4><u>Cheetah</u></h4>
<ul><a href="assets/images/line prints/Cheetah.png"><img src="assets/images/line prints/Cheetah-small.png"/></a></ul><br>
</div>
</div>
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
Sorry my css is
#Lineprints {
width: 240px;
border: 2px solid #ffdc87;
color: #000000;
float:left;
text-align: center;
}
#Lineprints2 {
width: 240px;
border: 2px solid #ffdc87;
color: #000000;
float: center;
text-align: center;
}
#Lineprints3 {
width: 240px;
border: 2px solid #ffdc87;
color: #000000;
float: center;
text-align: center;
}
#Printcontainer {
width: 245px;
color: #000000;
float: left;
text-align: center;
}
#Printcontainer3 {
width: 245px;
color: #000000;
float: center;
text-align: center;
}
#Printcontainer2 {
width: 245px;
color: #000000;
float: right;
text-align: center;
}
#Linetext {
clear : both;
width: 715px;
padding : 5px;
margin : 5px;
text-align:center;
color: #000000;
}
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
Hi there,
It looks like a lot of your problems are caused from your invalid HTML.
Here is a snippet from your markup:
<ul><a href="assets/images/line prints/tiger.png"><img src="assets/images/line prints/tiger - small.png"/></a></ul>
a
element can only have
as children.
When you have malformed HTML like this, the browser has to ‘guess’ about the display of it, sometimes it guesses wrong
You can see the results of your validation here:
http://validator.w3.org/unicorn/check?ucn_uri=http://www.pawsforwildlife.co.uk/index.php?q=line_prints.html&ucn_task=conformance
HTH
--
cal wilson
oksushi.com
Thanks Sushi, so how do I go about amending this?
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
-
☆ A M B ☆
- 24,524 Posts
<ul>
<li><a href="assets/images/line prints/tiger.png"><img src="assets/images/line prints/tiger - small.png"/></a></li>
</ul>
Excellent, thank you Sottwell
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
