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

hi.

looking for a good book to learn css, which does *not* labor ie6 hacks, since none of my readers use ie6 any longer.

i have read the head first book on xhtml/css, and now looking to expand my knowledge on css to include strong fundamentals, so i can move onto more cutting-edge stuff.

a friend recommended css mastery, but this book was published in feb 2006, and ie7 was released nov 2006, so i don't see how it could be considered applicable to current browsers.

there are so many to choose from.

again i'm looking to learn strong fundamentals, without the need to spend time learning ie6 hacks.

thanks.

Hey all,
I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones.

The URL Is
h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e

(no spaces)

If you load it in firefox (3.5.9) it looks just like I want it to.

If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening.

If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that.

If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you.

Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this.

When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way?

URL for the website so you can see it is below.

(There's really almost nothing on it, just messing around with layout)

http://www.omnimist.com

[edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit]

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;
}

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.

This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely.

I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....?

I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works.

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.

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

Hi, I have added the following doctype to my XHTML document:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This fixes several design problems, but my rollovers don't work anymore.
Am I using the right doctype?
here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php

How should I trouble shoot this?

thanks
-S

Good Day all,

I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be?

I seem to be ok in all browsers except IE6...

029c92a.netsolhost.com/brushes.html

Best,
Colin

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.

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?

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

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.