|
CSS - Setting Paragraph Sizes ..
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. Similar Tutorialshttp://m-i-x.net/beta basicly i want the 2 sides heights to be the same as the height of the content...how can i do it? I'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes How would I fix this problem so that the font renders the same size? Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as? I have an absolutely positioned login form that I am having some troubles with... On IE7 and the latest version of Fx it looks great. In some older versions of Fx (1.04 is what I have to test with...), the input size is off compared to the width of the div... And in IE6, the email input is actually wider than the password input (which is really weird since the inputs are set to a size of 25) Is there a better way to do this... What I want is to have the input fields the same width, with the submit button aligned along the right edge and to have the labels of the input fields aligned left. Or, if I am doing it the right way, what's the deal with IE6? I'm not too worried about the older Fx versions since it doesn't look all that bad, but on some computers with IE6, the box actually starts to push too far to the right for some reason... Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories. The code is as follows for the style sheet i have tried this: body{ font-family: Arial,sans-serif; color: #FFFFFF; line-height: 1.1; margin: 0px; padding: 0px; } a{ color: #FFFFFF; text-decoration: none; } a:link{ color: #FFFFFF; text-decoration: none; } a:visited{ color: #FFFFFF; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } b{ color: #FFFFFF; text-decoration: none; } b:link{ color: #FFFFFF; text-decoration: none; } b:visited{ color: #FFFFFF; text-decoration: none; } b:hover{ color: #FFFFFF; text-decoration: underline; } #navBar ul b:link, #navBar ul b:visited {display: block;} #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 70%; background-color: #112059; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ background-color: #0033CC; } #sectionLinks2{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 130%; background-color: #112059; } #sectionLinks b { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; /*font-size: 130%;*/ } #sectionLinks b:hover{ background-color: #0033CC; } and i have the following code in the htm page: <STYLE> BODY { scrollbar-arrow-color:094588; scrollbar-shadow-color:f0f0f0; scrollbar-face-color:f0f0f0; scrollbar-highlight-color:094588; scrollbar-darkshadow-color:094588; .style1 {font-size: 16px; background-color: #112059; background-color: #FFFFFF; } a:hover { color: #FFFFFF; } .style1 {color: #FFFFFF} b:hover { color: #FFFFFF; }.style1 {color: #FFFFFF} </STYLE> <div id="navBar"> <div id="sectionLinks"> <div id="sectionLinks2"> <h3 class="style1">Menu</h3> <ul> <li><b href="index.htm">Home</b></li> <li><b href="product.htm">Products</b></li> <li><a href="index.htm">Computer Systems</a></li> <li><a href="products.htm">Components/Peripherals</a></li> <li><a href="#">Laptops</a></li> <li><a href="#">Refurbished</a></li> <li><b href="services.htm">Services</b></li> <li><a href="#">PC Repairs</a></li> <li><a href="#">Upgrades</a></li> <li><a href="#">Home Networking</a></li> <li><a href="#">In-home training</a></li> </ul> </div> </div> </div> However this only allows hyper links to work that are defined under a href not the larger b href as I so want, I know this is complicated and long winded but can anyone lend some usefull solution to my problem? Yours greatfully. I have been doing this joomla site for someone here The problem is he says when its viewed on a 22" screen with a screen resolution of 1200x800 it does not view right in IE, check images on this post. I have not seen any of the problems on a 15, 17 , 19 and 42 " screens Can anyone else see any problems could you also check load times he said it was slow. An help would be great as i can't see the problem This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this .... When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous. Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em; I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file. I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all. This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments. HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.) Any thoughts much appreciated. I'm making a blog layout for someone, but I'm having problems with compatibility. I have not put in all the blog code yet, so don't tell me about that. My problem is that my scrolling div elements do not scroll in firefox. They work fine in IE though. I've tried everything I can think of. Firefox only resizes the table to fit the text, but I want scrollbuttons and a 90% high by 90% wide table.I want it to be compatible with as many resolutions as possible, so I am not really interested in going down the route of absolute table sizes, and even that doesn't seem to work either. Any ideas? If you can tell me what to do, please e-mail me: My email address Actually, on second thoughts you can just reply to this post. The CSS I tried: Code: <html>
<head>
<title>JM Beta</title>
<style type="text/css">
body {
background-color: #000;
}
table.main {
background-color: #fff;
border-style: solid;
border-width: 2px;
border-color: #666;
height: 90%;
width: 90%;
padding: 0px;
}
h3 {
font-size: 10px;
font-family: arial;
font-color: #000;
}
td {
border-style: solid;
border-width: 2px;
border-color: #666;
background-color: #fff;
padding: 10px;
}
div.scroll {
width: 100%;
height: 100%;
background-color: #fff;
overflow: auto;
font-size: 10px;
font-family: arial;
text-align: justify;
}
div.norm {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
font-family: arial;
text-align: justify;
}
</head>
</html>
I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row... div.bg_tp_lt = row 1 @ 105px div.bg_ct_lt = row 2 @ 53px div.bg_bt_lt = row 3 @ 68px So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated. Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$var</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles2.css" media="screen" />
</head>
<body scroll="no">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td bg_tp_lt"></div>
<div class="td bg_tp_ct"></div>
<div class="td bg_tp_rt"></div>
</div>
<div class="tr">
<div class="td bg_ct_lt"></div>
<div class="td bg_ct_ct"><div class="content">$content</div></div>
<div class="td bg_ct_rt"></div>
</div>
<div class="tr">
<div class="td bg_bt_lt"></div>
<div class="td bg_bt_ct"></div>
<div class="td bg_bt_rt"></div>
</div>
</div>
</div>
</body>
</html>
Code:
div.table {
display: table;
border: 1px solid #DDDDDD;
padding: 0px;
width: 404px;
}
div.thead {
display: table-header-group;
}
div.tbody {
display: table-row-group;
}
div.tr {
display: table-row;
}
div.td {
display: table-cell;
border: 0px solid #DDDDDD;
padding: 0px;
}
div.bg_tp_lt {
width: 105px;
height: 60px;
background-image:url(images/stl.jpg); no-repeat;
background-color: #000000;
}
div.bg_tp_ct {
width: auto;
height: 60px;
background-image: url(images/st.jpg); repeat-x;
background-color: #000000;
}
div.bg_tp_rt {
width: 105px;
height: 60px;
background-image: url(images/str.jpg); no-repeat;
background-color: #000000;
}
div.bg_ct_lt {
width: 53px;
height: 150px;
background-image: url(images/sl.jpg); repeat-y;
background-color: #000000;
}
div.bg_ct_ct {
width: auto;
height: auto;
background-color: #000000;
}
div.bg_ct_rt {
width: 53px;
height: 150px;
background-image: url(images/sr.jpg); repeat-y;
background-color: #000000;
}
div.bg_bt_lt {
width: 68px;
height: 64px;
background-image:url(images/sbl.jpg); no-repeat;
background-color: #000000;
}
div.bg_bt_ct {
width: auto;
height: 64px;
background-image: url(images/sb.jpg); repeat-x;
background-color: #000000;
}
div.bg_bt_rt {
width: 68px;
height: 64px;
background-image: url(images/sbr.jpg); no-repeat;
background-color: #000000;
}
/* Little hack for IE */
* html div.td { display: inline; }
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! Hi All I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari. I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received. Font size is fine FF3.5 and IE8 Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs. Hoping someone can help John Hey guys. I am increasing the size of my radio buttons using: input {width: 20px; height: 20px;} However. The radio buttons show much smaller in IE than firefox. Anyone have any clues how I can make the buttons semi-equal in size between browsers? Thanks. -Andrew I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size. A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything. So first question -- am I right about !important? It's only about user and author stylesheets, yes? Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right? Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."? Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan 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. 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. |
|||||||