Learn VBA & Macros in 1 Week!

CSS - Positioning And Covering Space

Full Excel VBA Course - Beginner to Expert

Positioning And Covering Space	View Content

I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog:

http://tkthebadomen.blogspot.com/

And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content?

Here's the css I currently have for the front scrolling sections:

Code:

div.front {
background-image:url(http://www.tksheppard.com/blog/front.png);
background-repeat: no-repeat;
background-attachment: scroll;
position:absolute;
width:1284px;
height:100%;
top: 500px;
left: 0px;
bottom: 0px;
}
div.middle {
background-color:#000000;
color:#000000;
position:absolute;
overflow:hidden;
width:1284px;
height:100%;
top: 150%;
left:0px;
bottom:0px;
}

If you need anymore code posted, let me know.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Div Tags And Relative Positioning -- Extra Space Problem

Space Added In Firefox Preventing Proper Positioning

Ghost Space Problem: Relative Positioning Text Over An Image Inside Table

Div Covering The Whole Body Tag

Div Covering Footer

Footer Covering Content

Iframe In Ie Covering Navigation

Link Backgrounds Only Covering Certain Amounts?

Ie 8 Covering Left Border With Content

The Best Css Book? Covering Beginner All The Way To Advanced?

Background Imge For Div Covering Entire Div

Covering All The Bases: Css Hacks And Fixes: Questions:

Need Help Covering Css Horizontal Menu To The Entire Width Of Table...

Css Positioning - Footer Positioning Problem

Why Is There A Space Between These Two Div's?

Ie Take Out All The Space

Want To Feel Available Space

White Space In Ul

Space Between Paragraphs

Obnoxious Space In Ie 6

Learn VBA & Macros for Excel in 1 Week!

Div Tags And Relative Positioning -- Extra Space Problem

Similar Tutorials

Hi All-

For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace?

Thanks,
infinity003

Space Added In Firefox Preventing Proper Positioning

Similar Tutorials

There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop.

temporary site <--- fixed. in a state of constant change.

The css is layout.css .

I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies).

I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up.

Ghost Space Problem: Relative Positioning Text Over An Image Inside Table

Similar Tutorials

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

Div Covering The Whole Body Tag

Similar Tutorials

Dear all,

I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following:

Code:

<div id="warningLayer"
style="position:absolute; width:100%;
height:100%; margin:0; padding:0;
background-color:#000000; opacity: 0.5;
z-index:999999999; display:block;
overflow:visible;">
&nbsp;
</div>

Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue?

Thank you in advance.

Div Covering Footer

Similar Tutorials

The page: http://new.midnighttempest.com/

As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content

the php file:
PHP Code:
<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);
include($phpbb_root_path . 'includes/bbcode.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

page_header('Homepage');

$template->set_filenames(
    array(
        'body' => 'main.html',
    )
);

$forumid = 14;

$sql_array = array(
    'SELECT' => '*',
    'FROM' => array(TOPICS_TABLE => 't'),
    'LEFT_JOIN' => array(
        array(
            'FROM' => array(POSTS_TABLE => 'p'),
            'ON' => 't.topic_first_post_id = p.post_id'
        )
    ),
    'WHERE' => 't.forum_id = ' . $forumid . '
        AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())',
    'GROUP_BY' => 't.topic_id',
    'ORDER_BY' => 'post_time DESC'
);
$sql = $db->sql_build_query('SELECT', $sql_array);
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result))
{
    $url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>";
    $poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>";
    $date = $user->format_date($row['post_time'], false, false) . "</strong>";
    $text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true);
    $avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';;

    $updates[] =
        '<table width="100%" border="0">
          <tr>
            <td colspan="2"><strong>Title</strong>:'.$url.'</td>
          </tr>
          <tr>
            <td width="10%">'.$avatar.'</td>
            <td width="90%">'.$text.'</td>
          </tr>
          <tr>
            <td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td>
          </tr>
          <tr>
            <td colspan="2"><hr/></td>
          </tr>
        </table>';


}
$db->sql_freeresult($result);

$template->assign_vars(
    array(
        'UPDATES' => implode('', $updates),
        'FORUMID' => $forumid
    )
);

page_footer();

?>

main.html
Code:

<!-- INCLUDE overall_header.html -->

    <div class="forabg" id="main">
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <span style="font-size: small">Updates</span>
                    </dl>
                </li>
            </ul>
            <ul class="topiclist forums">
                <li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
                    <p>&nbsp;</p>
                    {UPDATES}
                    <p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
                </li>
            </ul>
            <span class="corners-bottom"><span></span></span>
        </div>		
    </div>
    
    <div class="forabg" id="menu">
    	<div class="inner">
            <span class="corners-top"><span></span></span>
            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <span style="font-size: small">Menu</span>
                    </dl>
                </li>
            </ul>
            <ul class="topiclist forums">
                <li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
                    <!-- INCLUDE mt_menu.html -->
                </li>
            </ul>
            <span class="corners-bottom"><span></span></span>
        </div>
    </div>
  
<!-- INCLUDE overall_footer.html -->

mt_menu
Code:

<p><strong>Info</strong>
  <br />
  <a href="/">Home</a><br />
  About / Rules
    <br />
Join Form </p>
<p><strong>Members</strong>
  <br />
  Memberlist
  <br />
  Card List
  <br />
  Games
  <br />
  Forum
  <br />
  Donate
  <br />
  Login </p>
<p><strong>Other</strong>
  <br />
  Affiliates
  <br />
  Link to us
  <br />
  Randomizer
  <br />
  Staff Pay
  <br />
  Credits
  <br />
  Contact Us</p>

css
Code:

/* Midnight Tempest Layout */

#main {
	position:absolute;
	width:70%;
	overflow:visible;
	z-index:1;
}
#menu {
	float:right;
	width:20%;
	overflow:visible;
	z-index:2;
}

Footer Covering Content

Similar Tutorials

Iframe In Ie Covering Navigation

Similar Tutorials

IE is not very friendly when it comes to iframes. I wanted to know if there is a workaround for iframes on internet explorer.

Link Backgrounds Only Covering Certain Amounts?

Similar Tutorials

I made my site buttons so that there's some transparent areas so when you hover, only the transparent areas are colored by using the css's link background color properties, yet the background only reaches half way so the link background doesn't cover the whole image... this is the first time it has happened to me. Any suggestions on an alternate way to do this?

Ie 8 Covering Left Border With Content

Similar Tutorials

hi,

i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7.

However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo.

I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8.

Does anyone know whats causing this issue? Here is my code below.

Thanks in advance.

First, the HTML code:-

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 http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='Content-Language' content='en-us' />

<link rel='stylesheet' type='text/css' href='css/default.css' />

</head>
<body>
              
<div id='page'>
                            
  <div id='logo'>
                  
    <img src='gfx/siteLogo.jpg' alt='Our Website Logo' />  
                    
  </div>

</div>

</body>

</html>

Now the css file:-

Code:

/* page structure definitions */
html
  {  
  font-size: 100%; 
  }
  
body
  {
  margin: 0;
  padding: 0;  

  /* 20px */
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  
  text-align: center;
  
  font-family: Verdana, sans-serif;
  
  background-color: white;
  
  /* 16px */
  font-size: 1em;
  }


#page
  {
  margin: 0;
  padding: 0;  

  margin-left: auto;
  margin-right: auto;

  /* 900px */
  width: 56.25em;
        
  /* 1px */
  border: solid black 0.0625em;
      
  background-color: #ABBAD9;
  }

#logo
  {
  margin: 0;
  padding: 0;  

  /* 900px */
  width: 56.25em;
    
  /* 150px */
  height: 9.375em;  
  }


#logo img
  {
  margin: 0;
  padding: 0;  

  /* 900px */
  width: 56.25em;
  
  /* 150px */
  height: 9.375em;
  }

The image in the logo is 900px * 150px.

The Best Css Book? Covering Beginner All The Way To Advanced?

Similar Tutorials

Hi all,

Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS.

Thanks for any help

Background Imge For Div Covering Entire Div

Similar Tutorials

Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is.

Code:

#container #news {
  top:3px;
  width:260px;
  height:194px;
  background-color:#eeeee2;
  float:left;
  margin-bottom:4px;
  background: url(/images/section_top.gif) no-repeat top left;
}

The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance.

Covering All The Bases: Css Hacks And Fixes: Questions:

Similar Tutorials

Hi all, a few quick q's:

1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"...

2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.)

3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)?

4. Should I be using the TAN hack for height also? Example:
Code:

* html div { /* This is the Tan hack */
    height: 130px; 
    hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */

5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh.

Thanks in advance!
Cheers!
Micky

Need Help Covering Css Horizontal Menu To The Entire Width Of Table...

Similar Tutorials

Hi,

Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance.

Here is the CSS code and Html code for your reference:

CSS:

Code:


<style type="text/css">

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}


.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}

HTML Code:

Code:

<table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;">
	<tr>

		<td background="menubg.jpg" align="center">
		
<div class="horizontalcssmenu" align="center">
<ul>

<li><a href="default.htm">Home</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> 


<li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> 

<li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Service</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">References</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li>

</ul>
</div>
		</td>
	</tr>
</table>

Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated.

Css Positioning - Footer Positioning Problem

Similar Tutorials

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Why Is There A Space Between These Two Div's?

Similar Tutorials

In the following code...why is there a space between the two div's??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <style>
      #header { background-color: cadetblue; }
      #footer { background: blue; }
   </style>
</head>
<body>
   <div id="header">
      <p>This is my header.</p>
   </div>
   <div id="footer">
      <p>This is my footer.</p>
   </div>
</body>
</html>

If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there?

I mean shouldn't the paragraphs be fully enclosed inside the div's?

Such that no spacing should appear between the div's?

Any insight anyone might care to share with me would be most appreciated.

Thanks.

Carlos

Ie Take Out All The Space

Similar Tutorials

I've been trying to get all the space out of IE, tried line-height and all of that, and nothing.
Any hack to take out all of the space gaps so I can later on put some small margin?

Thanks in advance

Want To Feel Available Space

Similar Tutorials

Hey everyone,

I am creating Tabs in CSS. However these tabs are in 2 rows.

I was wondering if anyone can give me an idea how do i make these tabs so that they feel all the available space. Is it even possible to do that?

My tabs run in 2 rows and also its a combination of image and text.

so calculating the width of the screen and dividing by number of tabs doesnt seem to work.

White Space In Ul

Similar Tutorials

Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please?

Thanks so much!
vonatah

Space Between Paragraphs

Similar Tutorials

Hello,

I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement:

.conftabledetail {font-size:10px;}

I did that to make the content more compact and distinguishable from the headers.

I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs.

Apparently this selector does not work when used against a subclass, because I can't get this statement to work:

p + p.conftabledetail {margin-top:1em;}

I CAN get this statement to work:

p.conftabledetail {margin-top:1em;}

But that's not what I want to do.

Anyone have any ideas as to what I need to change or do differently?

It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag...

Thanks,

Chris

Obnoxious Space In Ie 6

Similar Tutorials

http://cirqueamongus.bdigia.com/main/
http://cirqueamongus.bdigia.com/x.css

Page is valid XHTML1.1 and CSS.

However, IE 6 causes a space to appear between my header div and my menu divs.

Firefox and opera display the page just fine

thanks for the help.

Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it.