-
1. Re: Link to line up under the h2
osgood_ Aug 6, 2012 2:57 AM (in response to broomeGirl)Try the below 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="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
#box1 {
background-color:yellow;
height:200px;
padding:0 1em 0 0;}
#box1 img {
float: left;
}
.floatRighth2{
float:right;
width:240px;
margin:0;
padding:0;}
#box1 p {
width: 240px;
float: right;
margin:0;
padding:0;
clear: right;
}
#box1 a {
color: red;
}
</style>
</head>
<body>
<div id="box1">
<a href="http://aicwa.squarespace.com"><img src="images/links/Aust-Inst-of-Conveyancing.jpg" width="144" height="134" alt="Australian Institute of Conveyancing" /></a>
<h2 class="floatRighth2">Australian Institute of Conveyancers WA Division</h2>
<p><a href="http://aicwa.squarespace.com/">http://aicwa.squarespace.com/</a> </p>
</div><!--END of box 1-->
</body>
</html>
-
2. Re: Link to line up under the h2
broomeGirl Aug 6, 2012 3:02 AM (in response to broomeGirl)All good! Yay! Fixed it, forgot to float the images.
-
3. Re: Link to line up under the h2
broomeGirl Aug 6, 2012 5:51 AM (in response to osgood_)Thank you soooo much
-
4. Re: Link to line up under the h2
broomeGirl Aug 14, 2012 5:47 AM (in response to broomeGirl)Hi Thought I had this all fixed but it appears not. The first screenshot shows the page in firefox
the second screenshot is from Adobe Browser Lab using internet explorer 9
Why do the h2 tags look a completely different size and font and also why doesnt the link in the first box line up with the h2 tags like in every other box. I have been all over my code and can find no difference for box1 as opposed to all the other boxes, ie box2, box3 etc.
Site is:
http://kimberleypropertysettlements.com.au/links.html
I would really appreciate learning how to fix this. Thanks so much for your time.
-
-
6. Re: Link to line up under the h2
osgood_ Aug 14, 2012 6:21 AM (in response to broomeGirl)OhDer wrote:
Hi Thought I had this all fixed but it appears not. The first screenshot shows the page in firefox
the second screenshot is from Adobe Browser Lab using internet explorer 9
Why do the h2 tags look a completely different size and font
http://kimberleypropertysettlements.com.au/links.html
When using shorthand css you have to observe strict rules as to the order of the attributes: The font-family must always go at the end and the size must come directly before it:
h2 { font: bold 2.4em "Palatino Linotype", "Book Antiqua", Palatino, serif; margin:0; padding:0; }
You'll probably want to re-adjust the size now as 2.4ems is too big.
Remove float: right; from 'box1 p' thats why your link is not sitting flush left under the heading:
#box1 p {
width: 240px;
float: right; /* REMOVE THIS */
margin:0;
padding:0;
clear: right;}
-
7. Re: Link to line up under the h2
broomeGirl Aug 14, 2012 6:35 AM (in response to osgood_)Wow you are absolutely awesome !!!! Thanks so much. I did not know about the order of bold versus size .. I did know that the font family name went at the end .. life is always learning!!









