|
CSS - Removing The Space Below A Header
If you look at this page: http://www.heavens-host.com/index.php
In Opera and Firefox there is no space between the heading tag in the middle and right columns. In IE however, there is a big gap. I have both of them set to a margin and padding of 0px; Am I missing something to get this working in IE? Here is the middle colum header and relevant css Code:
<div>
<h3><span>Welcome to</span> <span>Heavens Host</span></h3>
<img>
<p>Text</p>
</div>
#middle_column
{
padding:0px;
margin:0px;
width:392px;
float:left;
}
#middle_column p
{
margin:15px;
}
.dark_heading
{
color:#134774;
margin:0px;
padding:0px;
}
.light_heading
{
color:#3196F7;
margin:0px;
padding:0px;
}
.section_heading
{
padding:0px;
margin: 0px 0px 0px 15px;
}
And here is the right column Code:
<div>
<h3><span>Client</span> <span>Testimonial</span></h3>
<img>
<p>Text</p>
</div>
.right_content
{
width:200px;
padding:10px 0px;
margin:0px;
height:150px;
}
.right_content p
{
margin:5px;
}
.right_content h3
{
width:190px;
margin:0px 5px 0px 0px;
padding:0px;
text-align:right;
}
Similar TutorialsWhat is the correct way to remove the space between paragraphs? I have p { margin-top: -12px; } but IE/Win appears to be clipping the top of the topmost paragraph containers. What is the most compatible way to do this? I have something similar to the following: <div id="outer"> <div id="inner">Stuff</div> </div> #inner { top: -175px; } which lets me position background elements as needed so everything blends together well. The idea is that the outer layer background element needs to start lower than the inner layer and repeat until it contains the entire inner layer, and then stop. However, since I shift the inner layer upwards 175px, it gets the top where it needs to be, but it seems like it leaves 175px of the outer background repeating at the bottom...I don't need this space at the bottom. How can I remove it or make it disappear? An old draft of the file can be seen at Old Draft. The outer layer is the "carpet" background that repeats down the side and fades off in each direction. It needs to start where it does so it doesn't overlap the faded walls (applied to body tag). However, I want the desk area starting where it is now rather than where the faded walls end (too low on the page), so I shifted it upwards... I want to get rid of all carpet below the desk area, but the outer div expanded to contain the inner div, then the inner div was shifted upwards out of the top of the outer div, but outer div bottom did not shift upwards as well. In this table, the right column is displaying correct, the left column has an odd space appearing at the top. Here's the page www.scarboroughrocks.com/inthenews.htm I don't see where that space is coming from at the top of the left column. Here is the code: Code: <table width="531" border="1" cellpadding="2">
<tr>
<td width="251">
<h4 align=center>NEWS ARTICLES</h4>
<p><a href="http://www.worldnetdaily.com/news/article.asp?ARTICLE_ID=40550">"Joe Scarborough is one feisty guy"</a> - World Net Daily - 9/21/04 </p>
<p><a href="http://www.teenspeaknews.com/vol4/issue4/issues/new_age_conservatism.html">New Age Conservatism</a> - TeenSpeakNews - Vol.4, Issue4</p>
<p><a href="http://www.washingtonpost.com/ac2/wp-dyn?pagename=article&node=&contentId=A29236-2001Jul20">"Captive Parents: Scarborough shows support"</a> - Washington Post - 6/22/01</p>
<p> </p>
<h4 align=center>INTERVIEWS</h4>
<p><a href="http://www.nationalreview.com/interrogatory/scarborough200403290839.asp">"Cuppa Joe"</a> - 3/29/04- National Review Online </p>
<p> </p>
<p><a href="http://www.chuckbaldwinlive.com/real2.html">Chuck Baldwin Radio Show</a> - 5/24/97 </p></td>
<td width="260">
<h4 align=center>COLUMNS</h4>
<p><a href="http://www.jewishworldreview.com/0804/scarborough_archives.asp">Jewish World Review Archive </a> -4/03-9/04- awesome set, 150 in all</p>
<p><a href="http://www.justgivemesometruth.org">Florida Sun - "From The Pub"</a>- Must Read!! From the newspaper he created, of a more personal nature </p>
<p><a href="http://www.townhall.com/columnists/joescarborough/archive.shtml">TownHall.com</a> -5/03-7/03 - Other great columnists on this site too </p>
<p><a href="http://www.learnathome.com/506998.html?view=print">Crosswalk.com</a> - On human rights</p>
<h4 align=center>SPEECHES</h4>
<p><a href="speeches.htm#farewell">Farewell Speech to Congress</a> - 9/5/01</p>
<p><a href="speeches.htm#cuba">Human Rights in Cuba</a> - 4/24/01 </p>
<p><a href="speeches.htm#balancingbudget">Balancing the Budget</a> - 3/2/99</p>
<p><a href="speeches.htm#freeenterprise">The Power of Free Enterprise</a> - 3/5/98</p>
<p><a href="speeches.htm#castro">On the Castro Murders</a> - 2/27/96 </p>
<h4 align=center>TRANSCRIPTS</h4>
<p><a href="http://www.msnbc.msn.com/id/3719710/">"Scarborough Country" Transcripts</a> - Scroll to the bottom of that page to find transcripts from the previous week. </p>
<p>See the <a href="scarboroughcountry.htm">Show</a> page for older transcripts. </p></td>
</tr>
</table>
Thanks ya'll. I've been over this one so many times, and can't figure why it's behaving so strangely. Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me the url is www.devwebsites.com heres the code Code:
<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
color: #FFFFFF;
text-decoration: underline;
}
a:visited, body_avisited
{
color: #4B5970;
text-decoration: underline;
}
a:hover, a:active, body_ahover
{
color: #FF6600;
text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;
}
.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>
<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div
<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> BBoardX Forums
</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
/><input type="checkbox" name="remember" />Remember me<br />
Password <input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>
and yes ryan420 i know what your going to say when (if) you see this thread link lol Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! Hi I have been using CSS for menus, content, etc for a while now, its great. But now I am using a table to display a list of products pulled from a database. I recently read that the table will not start to display until the whole of the <table> tag has loaded. This has become an issue, I think, because the table is slow to load. Should I consider scrapping the table and using CSS instead to display the list of products? Would CSS help at all? Thanks Jake Hey guys! I have the following code in my CSS that controls the links in my document. The trouble is all my visited links appear as not underlined and all my unvisted links appear underlined? could someone help me to remove this? I can't get it to work PHP Code: #nav.a:link{ color: #FFF; text-decoration: none; background: transparent; padding: 0px 0px 0px 5px; } #nav a:visited { color: #FFF; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } #nav a:hover { color: #9CC9E3; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } Thanks Charlie I am trying to create a print-friendly page using css and as well as formatting the background and font i want to remove the other 3 frames on the site. I have tried to assign them class="noprint" so i can remove them using ".noprint { display: none; }" but they still appear on the print preview in ie6 & ff1.0. The background and font are correctly formatted to the instructions in the css file so i know that some of it is working. Could it be that the class is not being correctly assigned, what is the proper technique to assign a frame a particular class? Do i have to assign a class to all the elements within the frame too? Any help would be hugely appreciated as i'm tearing my hair out here! SalP Im trying to remove the bullet icon from the unordered list but I can't make it work in FF or IE... XHTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="css/menu.css" /> <title>Test</title> </head> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">General</a></li> </ul> </div> </body> </html> and the CSS: Code: ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
It's probably something really obvious! I would like to remove the right and left toolbars from a website I visit. The website is http://www.fark.com. how would i go about this using css with mozilla. What do I need to add to my usercontent.css? Sorry if this is the wrong place to post. Thanks. Hi, I have a site with a large Flash header. I'm trying to remove the scroll bar for the width of the site, but I can't figure out how. you can see the site he my site Any ideas of how to go about this? Can a Flash file be made into a background image? thanks Hi everyone, Just two really quick questions. Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list? Thanks for any help. Hi All, I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page. Is there anyway to remove all CSS formating in a section? So eg: <div style='none'> Some HTML </div> TIA Charlie Hey everyone, I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts? I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} of course it works nicely in firefox, but the devil IE refuses. any ideas on how to removie the border of a select box so it just appears with the down arrow? under the top three icons youll see the drop downs http://mattwild.com/turbo-concepts/main.php CSS i used background-image:url(''); background-repeat: no-repeat; background-color: 000000; color: ffffff; width:; height:; overflow: none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; position:relative; left:0; bottom:0; border:0px solid; filter: alpha(opacity=60); opacity: 0.6; z-index:10; Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Hi I have been trying to remove certain items from the admin bar which appear at the top of all WordPress pages. I've managed to remove the 'visit' menu from it by reading a forum elsewhere and editing CSS but I have had no luck with researching how to remove the site name that appears first on the left of the admin bar. Does anyone here know how I can do it? Thanks |
|||||||