/    Sign up×
Community /Pin to ProfileBookmark

Inline questions

Copy linkTweet thisAlerts:
Jun 01.2008

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.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 01.2008 — Would have to see an example of this, as there shouldn't be any gap at all.
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 01.2008 — 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?
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 01.2008 — Here is an example of what it looks like in IE


http://img124.imageshack.us/img124/8003/sitefk7.jpg
Copy linkTweet thisAlerts:
@CentauriJun 01.2008 — 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.
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 01.2008 — 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:[email protected]">[email protected]</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:[email protected]">
[email protected]</a></p></center>


</body>

</html>
Copy linkTweet thisAlerts:
@CentauriJun 02.2008 — 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 [CODE]xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"[/CODE] garbage? - it does not belong there.
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 02.2008 — 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.
Copy linkTweet thisAlerts:
@LeeUJun 04.2008 — [ moved to the proper forum ... ]
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 05.2008 — 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">
    <br />
     <span class="style13">AUG 25, 2008</span><br />
<br />
     Welcome to the new school year and the launch of our
new site.<br />
     Please be patient while we work out any bugs in the system.   We
<br />
     are
excited about this new year and all of the opportunities that will <br />
     be presented to ASCM
members.<br />
<br />
<br />
     <span class="style12">Reminders:</span><br />
<br />
     <strong>Dues:</strong><br />
     ASCM general membership is $35 and MCA membership is an
<br />
     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:[email protected]">[email protected]</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:[email protected]">
[email protected]</a></p>
</center>
</body>

</html>


I know the code is messy, so any advice on how to clean it up would be appreciated.
Copy linkTweet thisAlerts:
@CentauriJun 05.2008 — 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 [B]and[/B] images) and attach the zip file, I can resurrect it locally to offer some suggestions.
Copy linkTweet thisAlerts:
@Sgt_SupermanauthorJun 05.2008 — 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
×

Success!

Help @Sgt_Superman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...