PDA

Click to See Complete Forum and Search --> : Inline questions

Sgt Superman
05-31-2008, 09:35 PM
I am having issues getting some paragraphs with image backgrounds to line up next to each other. When I use display:inline they disappear. when I try to use display:inline-block they line up in the display but when I preview them in the browser they are stacked on top of each other. When I use float they are side by side in both design and when I preview, but they are separated by one pixel even though all the margins say 0.
Centauri
05-31-2008, 10:25 PM
Would have to see an example of this, as there shouldn't be any gap at all.
Sgt Superman
05-31-2008, 10:26 PM
So I figured out that I was using Float:right and that was lining it up with the right side and creating the small gap. But I still don't know why the display:inline doesn't work.

Also I notice that when floats are used a gap between the header and the paragraphs under it show up, when I preview in Firefox it goes away, but in IE the gap is there, what is the fix for this?
Sgt Superman
05-31-2008, 10:40 PM
Here is an example of what it looks like in IE


http://img124.imageshack.us/img124/8003/sitefk7.jpg
Centauri
05-31-2008, 11:35 PM
With inline display, you lose the ability to specify height or width, but the background should still appear behind the text itself.

Very difficult to tell what can be causing the gap just from a picture, as we don't know what the structure is. A number of things can cause gaps like this in IE (especially IE6), and the fixes required depend on what bug is triggered.
Sgt Superman
06-01-2008, 04:14 PM
Here is my code so far,

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
text-align: center;
margin-left: 54px;
margin-bottom: 1px;
}
.style5 {
text-align: center;
margin-left: 54px;
font-family: Arial;
font-size: small;
margin-bottom: 1px;
margin-top: 0px;
}
.style6 {
text-align: center;
margin-left: 0px;
font-family: Arial;
font-size: small;
margin-bottom: 1px;
margin-top: 0px;
margin-right: 0px;
}
.style7 {
margin: 0px;
text-align: center;
font-family: Arial;
font-size: small;
}
.style8 {
margin-bottom: 0px;
}
</style>
</head>

<body style="background-image: url('Background.jpg')">

<center><div style="width: 761px; height: 1010px">
<img alt="" src="Logo.jpg" width="253" height="316" class="style8" /><img alt="" src="Picture01.gif" width="508" height="316"/>
<p class="style7" style="width: 199px; height: 694px; background-image: url('navhome.jpg');float:left"></p>
<p class="style6" style="width: 561px; height: 694px; background-image: url('maintextbackground.jpg');float:left"></p>
</div></center>

<center><p class="style1" style="width: 721px; height: 36px"><font color="666666" face="Arial" size="2">Contact us:
<a href="mailto:ascm@arch.wsu.edu">ascm@arch.wsu.edu</a> • 509-335-5539 •
<a href="http://www.arch.wsu.edu">School of Architecture
and Construction Management</a><br />
PO Box 642220 • <a href="http://www.wsu.edu">Washington
State University</a> • Pullman • WA • 99164-1042 • USA</font></p>

<p class="style5" style="width: 721px; height: 36px">If there are any technical
issues, please contact the webmaster at <a href="mailto:mrallen@wsu.edu">
mrallen@wsu.edu</a></p></center>


</body>

</html>
Centauri
06-02-2008, 12:59 AM
Hmm, you seem to be using a number of deprecated elements (like center and font), mixing inline and embedded styling, assigning class names which have no meaning to the usage, and using semantically incorrect elements (the menu should be a list, not a paragraph, and the content area should be a div as I am sure you will want more than just one paragraph of text in there... ). From what I can gather from your example graphic and the sizes in the html, even the graphic slicing/utilisation does not really match with the elements to which they are applied. All this makes debugging very difficult.

Your immediate issue of the gap is due to inline elements, such as images, leaving a gap at the bottom for text decenders and IE will add that gap to push a set size on a containing element larger, whilst good browsers will respect set sizes. If you can target the two header images (difficult as the container does not have a class or id), then setting their vertical-align property to "bottom" should remove the gap ( vertical-align: bottom; ).

Also, what is this xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" garbage? - it does not belong there.
Sgt Superman
06-02-2008, 09:03 AM
Thank you for your help, I am very new to all this, but I am learning. I have all summer to figure out the correct way before this has to be done so I will be asking many more questions.

So how do I center without using a deprecated element?

And that garbage you are asking about must have been put there by the program I am using. I will get rid of it.
LeeU
06-04-2008, 03:56 PM
[ moved to the proper forum ... ]
Sgt Superman
06-05-2008, 08:37 AM
I have got my page working how I want in both IE and FF. The only issue I am having right now is the paragraph on the bottom won't move to the right no matter how much I set the left margin.

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WSU ASCM Homepage</title>
<style type="text/css">
.style1 {
text-align: center;
margin-left: 0px;
margin-bottom: 1px;
margin-top: 0px;
}
.style6 {
text-align: center;
margin-left: 0px;
font-family: Arial;
font-size: small;
margin-bottom: 1px;
margin-top: 0px;
margin-right: 0px;
}
.style7 {
margin: 0px;
text-align: center;
font-family: Arial;
font-size: small;
}
.style8 {
margin-bottom: 0px;
}
.style9 {
border-width: 0;
}
.style10 {
margin-top: 30px;
text-align: left;
font-family:"Arial Black"
}
.style11 {
font-family: "Arial Black";
color: #C8021D;
margin-top: 27px;
font-size:medium;
margin-bottom: 9px;
}
.style12 {
color: #C8021D;
}
.style13 {
color: #C8021D;
text-decoration: underline;
}
</style>
</head>

<body style="background-image: url('Background.jpg')">

<center><div style="width: 761px; height: 1010px">
<div style="width: 761px; height: 316px; vertical-align:bottom">
<img alt="" src="Logo.jpg" width="253" height="316" class="style8" /><img alt="" src="Picture01.gif" width="508" height="316"/>
</div>
<div class="style7" style="width: 199px; height: 694px; float:left; border:none">
<img src="Navhome.jpg" width="199" height="694" usemap="#index_01_Map" class="style9"/>
<map name="index_01_Map">
<area shape="rect" coords="51, 73, 166, 109"; href="02%20news%20and%20events.htm">
<area shape="rect" coords="52, 129, 166, 164"; href="03%20overview.htm">
<area shape="rect" coords="53, 182, 167, 217"; href="04%20officers%20an%20members">
<area shape="rect" coords="54, 235, 168, 270"; href="05%20how%20to%20join.htm">
<area shape="rect" coords="48, 293, 175, 324"; href="06%20scholarships.htm">
<area shape="rect" coords="49, 343, 165, 381"; href="07%20industry%20sponsors.htm">
<area shape="rect" coords="51, 398, 169, 434"; href="08%20merchandise.htm">
</map>
</div>
<div class="style6" style="width: 561px; height: 694px; background-image: url('maintextbackground.jpg');float:left">
<p class="style11">WELCOME TO THE 2008 - 2009 SCHOOL YEAR!</p>
<p style="width: 555px; height: 272px; background-image:url('Textbackground.jpg')" class="style10">
&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp; <span class="style13">AUG 25, 2008</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp; Welcome to the new school year and the launch of our
new site.<br />
&nbsp;&nbsp; &nbsp; Please be patient while we work out any bugs in the system.&nbsp; &nbsp;We
<br />
&nbsp;&nbsp;&nbsp;&nbsp; are
excited about this new year and all of the opportunities that will <br />
&nbsp;&nbsp;&nbsp;&nbsp; be presented to ASCM
members.<br />
<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp; <span class="style12">Reminders:</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp; <strong>Dues:</strong><br />
&nbsp;&nbsp;&nbsp;&nbsp; ASCM general membership is $35 and MCA membership is an
<br />
&nbsp;&nbsp;&nbsp;&nbsp; additional $5, checks made payable to WSU ASCM and WSU
MCA.</p>
</div>
</div>
<p class="style1" style="width: 648px; height: 56px">Contact us:
<a href="mailto:ascm@arch.wsu.edu">ascm@arch.wsu.edu</a> • 509-335-5539 •
<a href="http://www.arch.wsu.edu">School of Architecture
and Construction Management</a><br />
PO Box 642220 • <a href="http://www.wsu.edu">Washington
State University</a> • Pullman • WA • 99164-1042 • USA<br />
</font>If there are any technical
issues, please contact the webmaster at <a href="mailto:mrallen@wsu.edu">
mrallen@wsu.edu</a></p>
</center>
</body>

</html>


I know the code is messy, so any advice on how to clean it up would be appreciated.
Centauri
06-05-2008, 09:14 AM
It could be due to the <center> tag, but I am not sure as I don't use these deprecated elements as mentioned above. If you could zip the whole thing (html and images) and attach the zip file, I can resurrect it locally to offer some suggestions.
Sgt Superman
06-05-2008, 03:13 PM
The file is about 5mb because I have a .gif image so it is too large to attach here, but I uploaded it here:

http://www.uploading.com/files/VBYE3S8D/ASCM_NEW_SITE.zip.html