|
CSS - [ie7] Border-top Of Div Affected By Background Of Paragraph On Top
Here's the code.
Code: <div class="entry"> <p>Blah blah blah</p> <div class="postmetadata"> <div class="hide"> Blah blah blah </div> Blah blah blah </div> And the CSS. Code: #content div.post div.entry {
float:left;
margin:-5px auto auto 6px;
width:570px;
font-size:12px;
line-height:20px;
}
#content div.post div.entry p {
margin:0;
padding:0;
background:white;
}
#content div.post div.entry div.postmetadata {
margin:10px auto 20px auto;
font-size:11px;
line-height:19px;
border-top:1px solid #bcbcbc;
}
#content div.post div.entry div.postmetadata div.hide {
display:none;
}
Apparently I have to set background:white; to the #content div.post div.entry p for div.postmetadata's border-top to appear in IE7. Firefox and IE8 displays this correctly. Any ideas? Similar TutorialsI like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this? Hey folks, i'm just doing some experimenting with css right now, and hit a snag. if you look at the page, you'll see 'howdy' inside the top negative. i'm trying to format the text to fit inside the middle section of the negatives...one negative per paragraph. Whenever i try formatting it, it shifts the image downward, and i don't know what to do to fix it. CSS Code:
.ptext {
font:10px verdana, arial, sans-serif;
color:white;
padding:50px 60px;
width:350px;
height:375px;
}
p {
background:black url(images/negative.gif) no-repeat left;
height:375px;
width:350px;
}
HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>black/white - some kinda website</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="35mm_styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <h1></h1> <p> <span class="ptext">howdy.</span> </p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html> any help'd be greatly appreciated. Hi, I'm getting a weird problem when viewing my client's site with IE6, however, it works fine in IE7 and FF. Here's the link: http://www.groundedgroup.com/client...or-sale/554421/ As you'll notice, the middle area containing the description of the home is messed up. Basically, the background resizes as you move the browser scroll bar up and down. Never seen this before. Does the same with the comment area below, too. Any ideas what's causing this? Thanks in advance. i have a div named #main that contains #content(float:right), #sub(float: left), and #footer(clear:both). In IE, #main's background color doesn't stretch all the way through #footer, even though a bottom border applied to #main displays below #footer. So there's a space between the background and the border! #main's background is brown/grey, and botom border is 1px green. What gives? http://www.nomadicamedia.com/temp/ Hi: I recently posted this issue (http://forums.devshed.com/css-help-116/border-image-problems-with-ie-312603.html) and got half the problem solved. I have an image as the background of a <td> tag. Also I have a border-top and border-bottom surrounding the image. My problem is that in IE, the borders are not lining up agains the image. They are a pixel away, which screws up my tabs. CSS: Code:
html, body {
margin: 0px;
padding: 0;
background: #EEF;
font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000;
}
table#main {
margin: 3px;
padding: 3px;
width: 99%;
}
#header {
background: #FFF;
background-image: url(include/head.jpg);
background-repeat: no-repeat;
height: 136px;
width: 100%;
background-position: right top;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
#nav {
margin: 0;
padding: 0;
position: absolute;
top: 125px;
float: left;
}
#nav li {
list-style: none;
float: left;
margin-left: 4px;
padding-left: 15px;
font-size: 10px;
line-height: 17px;
white-space: nowrap;
background: url(include/tab.gif) 0 0 no-repeat;
border-bottom: 1px solid #999;
}
#nav a {
display: block;
float: left;
padding: 0 16px 0 0;
text-decoration: none;
background: url(include/tab.gif) 100% 0 no-repeat;
color: #999;
width: .1em;
}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {color: rgb(62%,35%,22%);}
#nav #current, #nav #current a {
color: #FDB;
background-image: url(include/tab.gif);
}
.title {
font: bold 24px/26px "Times New Roman", Times, serif; color: #000;
display: block;
margin-left: 4px;
}
The pertinant declaration is the #header id. I used the background-position: right top as was suggested which solves the the problem at the top, but now there are two pixels separating the image and the border on the bottom! Please help! As a side note, this works perfectly in Firefox (of course). If any other info is warranted, please let me know! The link to the page is: http://www.wiu.edu/users/mujas2/test/ Hi, I just was wondering if there is a way to load an image as background of a div with a 1px padding from the border of that same div. At the moment I have to create two divs. The first div has the border and a padding of 1px and the second div loads the image as background! However I was wondering whether I could do all this in one. Regards, Sim085 I'm pretty new to CSS but I'm slowly working through problems on a site I am making for some friends (more accurately a template for their content publisher) and I came across a problem. I have a table that contains all of the pictures spaced properly, but I can't get it to resize down to something that makes sense. I tried adding style="... directly to it as well as width="... but none seem to resize it. (I tried both fixed and percentages) Link: http://www.coreconsciousness.com/orangenew.html Heres the code, the external CSS doesn't contain anything important at the moment: 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
td.c1
{
background-image:
url('images/textboxorange.gif');
background-repeat: repeat-y;
width:100%;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td colspan="8"><img src="images/Orangenew_02.png" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/Orangenew_04.png" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/Orangenew_05.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_06.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_07.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_08.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_09.png" alt="" /></td>
</tr>
<tr>
<td><img src="images/Orangenew_11.png" alt="" /></td>
<td><img src="images/Orangenew_12.png" alt="" /></td>
<td rowspan="3"><img src="images/Orangenew_13.png" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img src="images/Orangenew_14.png" alt="" /></td>
</tr>
<tr>
<td colspan="8" class="c1">
<h1>#CONTENT#</h1>
<img src="images/Orangenew_15.png" alt="" />
</td>
</tr>
</table>
</body>
</html>
i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to. Code: border: 1px solid #69A2CC; background: transparent url(gradient.jpg) no-repeat scroll 0 center; Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
My "sidebar" div isn't appearing, and neither is my paragraph inside my "mainContent" div. I have looked online and proofed it over and over, but can't seem to find the problem. Any help will be appreciated. CSS: Code: /*
Designed by: Derrick Zavarella
Date: 10/19/2010
Primary Colors:
#ffffff
#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body{
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#container{
width: 960px;
margin: auto;
}
#header{
width: 960px;
height: 135px;
background-image: url(images/header.png);
background-repeat: no-repeat;
margin-top: 20px;
}
#header h3, p{
display: none;
}
#nav{
width: 960px;
height: 20px;
background-color: #1c140d;
}
#nav ul{
float: left;
list-style: none;
margin-top: 3px;
}
#nav ul li{
display: inline;
margin-left: 5px;
}
#nav ul li a{
color: #f2e9e1;
text-decoration: none;
font-style: italic;
font-size: 10px;
}
#nav ul li a:hover{
color: #cbe86b;
}
#mainContent{
float: right;
width: 760px;
margin: 0px;
padding: 20px 0px 0px 0px;
}
#mainContent h2{
font-weight: normal;
font-style: italic;
font-size: 16px;
margin-top: 15px;
}
#mainContent p{
color: #f2e9e1;
}
#sidebar{
float: left;
width: 200px;
background-color: #e7e6e6;
}
HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="content-type" content=
"text/html; charset=windows-1250">
<link rel="stylesheet" href="style.css" type="text/css">
<title>deBuhrs Seed & Feed</title>
</head>
<body>
<!--container begins here-->
<div id="container">
<!--header begins-->
<div id="header">
<h3>deBuhrs</h3>
<p>seed&feed</p>
</div>
<!--end header-->
<!--navigation begins-->
<div id="nav">
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="products.html">products</a></li>
<li><a href="staff.html">staff</a></li>
<li><a href="contact.html">contact us</a></li>
<li><a href="affiliate.html">affiliate</a></li>
</ul>
</div>
<!--navigation ends--><!--mainContent begins-->
<div id="mainContent">
<h2>welcome to our new website!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula,
porttitor eu, consequat vitae, eleifend ac, enim.
Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet.
Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus eget condimentum
rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem.
Maecenas nec odio et ante tincidunt tempus. Donec
vitae sapien ut libero venenatis faucibus. Nullam
quis ante. Etiam sit amet orci eget eros faucibus
tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat,
leo eget bibendum sodales, augue velit cursus
nunc.<br>
</p>
<hr align="center" width="450" noshade="noshade" color="#e7e6e6">
<h2>welcome to our new website!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula,
porttitor eu, consequat vitae, eleifend ac, enim.
Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet.
Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus eget condimentum
rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem.
Maecenas nec odio et ante tincidunt tempus. Donec
vitae sapien ut libero venenatis faucibus. Nullam
quis ante. Etiam sit amet orci eget eros faucibus
tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat,
leo eget bibendum sodales, augue velit cursus
nunc.</p>
</div>
<!--end mainContent-->
<!--sidebar begins-->
<div id="sidebar">
</div>
<!--sidebar ends-->
<!--footer begins-->
<div id="footer">
</div>
<!--footer ends-->
</div>
<!--end container-->
</body>
</html>
Hey, i've got a contact form , and to the right of it i want the contact information. it's showing up in FF, but won't sit next to the form, it's going to the top, and doesn't even show up in IE...it's in the source, but not visible on the page. Here's the CSS; Code:
#formbox {
margin:10px 15px;
padding:15px;
border:1px solid #333;
width:40%;
font-size:8pt;
color:white;
}
.inputareas {
width:60%;
border:1px solid white;
background-color:#FBAB2B;
color:#333;
padding:1px;
margin:2px;
}
.submit {
border:1px solid white;
background-color:#FBAB2B;
color:#333;
margin:2px;
}
textarea {
font-size:8pt;
color:#333;
}
/* contact form paragraph */
.contactform {
border:1px solid #333;
width:35%;
font-size:8pt;
color:white;
position:relative;
left:55%;
z-index:20;
}
and the html; Code:
<p class="contactform"> <strong>Jack Rosenberg</strong><br> phone - 734-536-6088<br>
fax - 734-943-6039<br> email - jrosen@canamdesign.com<br><br> <strong>Pete
Komsic</strong><br> phone - 519-996-4673<br> email - pkomsic@canamdesign.com<br><br>
<strong>Scott Stein</strong><br> phone - 519-564-7175<br> email - sstein@canamdesign.com<br>
</p>
<div id="formbox">
<p>Please complete the following form, ensuring <b>ALL</b> fields are
complete.</p>
<!-- DISPLAYS ERRORS IF FORM IS INCOMPLETE -->
<?php
// Check to see if there has been any errors...
if(!empty($errors)) {
echo '<h3>Sorry there has been the following errors with your form :</h3>';
// Print the errors
echo "<div class=\"reglist\">";
echo "<ul>";
foreach($errors as $error) {
echo "<li>$error</li>";
}
echo "</ul>";
echo "</div>";
}
?>
<!-- DISPLAYS INFO IF FORM IS PROPERLY COMPLETED -->
<?php
// We only want to show the form if there has been no sucessful post
if(isset($post_sucess)) {
?>
<h3>The following information was sent to us by you:</h3>
<p><b>Contact Name:</b><br> <?php echo htmlentities ($_POST['name']); ?></p>
<p><b>Email:</b><br> <?php echo htmlentities ($_POST['email']); ?></p>
<p><b>Phone Number:</b><br> <?php echo htmlentities ($_POST['Phone']); ?></p>
<p><b>Inquiry:</b><br> <?php echo htmlentities ($_POST['inquiry']); ?></p>
<?php
} else { // Else show the form
?>
<form method="post" name="contactform" action="<?php $_POST['PHP_SELF'];?>">
<fieldset>
<legend>Name:<br></legend>
<input type="text" name="name" class="inputareas">
</fieldset>
<fieldset>
<legend>Email:<br></legend>
<input type="text" name="email" class="inputareas">
</fieldset>
<fieldset>
<legend>Phone Number:<br></legend>
<input type="text" name="phone" class="inputareas">
</fieldset>
<fieldset>
<legend>Inquiry:<br></legend>
<textarea rows="4" cols="30" class="inputareas" name="inquiry"></textarea>
</fieldset>
<fieldset>
<legend>
<input type="submit" value=".:Submit:." class="submit" name="submit">
</legend>
</fieldset>
</form>
<?php } ?>
</div>
<!-- CLOSES FORM BOX -->
thanks! I have used this in my CSS: p { margin-top: 0.5em;} But it renders differently in IE6 and Netscape 7. Is there a method to get this equal in both ? Thanks. I read somewhere that we can format the first letter of each paragraph separately from the rest of it by CSS. Is possible and how? I'm a CSS newbie and this is my very first page that I have to make for a class. I can't figure out how to move my text below/center my headline. Every time it gets close (when I use margins) it jumps right to the bottom. P.S. If my code seems strange it's because I'm not really sure what I'm doing yet, so if you have any advice/better ways to achieve the same effect, please let me know HTML: <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Welcome to Jolie Manor Bed and Breakfast</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="style3.css"/> </head> <body id="body" onload=""> <div id="wrap"> <img src="manor.jpeg" alt="Manor" class="floatleft" /> <h1> Jolie Manor <br /> <span class="smaller">Bed and Breakfast</span></h1> <p class="blocktext"> Escape to Jolie Manor, a luxury waterfront bed and breakfast on the eastern shore, where the Chesapeake Bay is aglow in warm sunsets, where towering oaks gently kiss the skyline and where you can let your body rest and your mind wander.</p> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home Page</a></li> <li><a href="assignment32.html">Amenities</a></li> <li><a href="#">Rates</a></li> <li><a href="#">Local Features</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </body> </html> CSS: body { width: 800px; height: 620px; background-color: rgb(171,214,212); } #wrap { width: 100%; height: 100%; background-image:url(book2.tif); background-repeat:no-repeat; background-position: center; } h1 { color: rgb(69,38,26); font-family: serif; margin-right: 150px; margin-top: 100px; margin-left: 0px; float: right; font-size: 2em; } .blocktext { margin-left: 10px; margin-right: 0px; width: 10em; float: right; margin-top: 170px; margin-bottom: 0px; } p { color: rgb(69,38,26); font-family: serif; } .floatleft { margin-left: 60px; margin-top: 145px; } .smaller { font-size: .75em; } #navcontainer { background: #f0e7d7; margin: 0 auto; padding: 1em 0 0 0; font-family: georgia, serif; text-transform: lowercase; position:fixed; top:5px; } #navcontainer ul { padding: .2em 0; margin: 0; list-style-type: none; background-color: rgb(69,38,26); color: #FFF; width: 100%; font: normal 90% arial, helvetica, sans-serif; text-align: center; position:fixed; top:5px; } li { display: inline; } li a { text-decoration: none; background-color: rgb(69,38,26); color: #FFF; padding: .2em 1em; border-right: 1px solid #fff; } li a:hover { background-color: #369; color: #fff; } Finally nearing completion of my site upgrade and fixing some minor visual problems. One of them being that the spacing between paragraphs is off. In that paragraphs are flushed against one another. After googling this for some time I found a fix that works perfect in opera and firefox but ie just refuses to go along. So my question is what do I do for it to work in IE? The code that works for FF and Opera is: Code:
p.normTxt + p.normTxt {
margin-top: 1em;
}
In IE the above code doesnt' work and acts like it's not even there. I really don't want to do margin-top, margin-bottom b/c that introduces another problem of only spacing if it's a middle paragraph. Thanks. I think this is a very basic quesiton, but I am stumped with it. How can I make a paragraph that will be a specific width in the middle of the page for example regardless of the size of the monitor or browser window - that is, the paragraph will stay the same width even though it is on a page that will stretch to fill the entire window? This can be done of course with tables, but I would like to know how to do it with CSS. The margin property seems of no help because you must assume a given size of the page or parent element. Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas. Here is the IE Screenshot and the Firefox Screenshot Also... The CSS and The HTML I have a bunch of text with nice formatting using paragraphs and I want to have a spacing between the paragraphs. I could easily do that by: Code: p { margin-bottom: 25px; }
But that will make it so the last paragraph to also have a margin like that, how can I make it so that the last paragraph have a bottom margin of 0? Just the last one in that bunch of text. Now that, this is dynamic content generated by WordPress. WordPress text is place using paragraphs but the last paragraph on each post also has a margin that shouldn't be there, or my current design of course. Is there a way around this? Hi everyone, I am having a problem where my text is resonably small and the paragraph spaces between them look silly because they seem much too big for the font size. Please have a look at my example below: CSS: Code:
div.orange{
background-color: #993400;
color: #FFFFFF;
width: 174px;
font-size: 10px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: none;
text-align: justify;
padding: 3px
}
.orangeHilight{
color: #000000;
font-weight: bold;
}
HTML: Code: <div class="orange"><p>DO YOU KNOW?</p> <p class="orangeHilight">Suppliers are shown per your choice of category:</p> <p>PLATINUM suppliers are shown first, with details of their companies and hospitality experience, contact details and a link to their own web sites for a closer look at their products. They also have pictures in the listing.<br> GOLD suppliers are shown next, but without pictures.<br> SILVER suppliers are listed with limited information and contact details.</p> <p>We also have a number of free listings for suppliers not currently registered with Hotelstuff. These are suppliers who may be of interest to you. Our toll free desk can help you with current contact information.</p></div> See what I mean. So is there anyway to reduce the space between paragraphs? Thanks to anyone who can help me out! Kenneth |
|||||||