Learn VBA & Macros in 1 Week!

CSS - Avoiding <div Style="clear:both">

Full Excel VBA Course - Beginner to Expert

Avoiding <div Style="clear:both">	View Content

Hello. I'm trying to avoid using the

<div style="clear:both">

fix for keeping elements from floating outside of their containers in IE7. Here's the code that's working with that fix. I'd like to have a way to adjust the CSS so I can take that out.

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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link href="css/global.css" rel="stylesheet" type="text/css" /> 
<link href="css/.css" rel="stylesheet" type="text/css" /> 
<title>A Beautiful Smile</title> 
</head> 
<body> 
 
<div id="wrapper"> 
<div id="banner"> 
	<ul id="navigation"> 
		<li><a href="">Home</a></li> 
		<li><a href="">Help</a></li> 
		<li><a href="">Contacts</a></li> 
	</ul> 
	<img id="logo" src="images/global/logo.jpg" alt="Company Logo" /> 
	<div style="clear:both"></div><!--Prevents img changesmile.jpg from going outside banner in IE7 --> 
	<img id="changesmile" src="images/global/changesmile.jpg" alt="Learn how we can change your smile." /> 
</div>	
<div id="footer"> 
</div> 
	
</div> 
	
</body> 
</html>

CSS
Code:



/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, textarea
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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}

/* End CSS Reset, Begin Styling */

#wrapper{
margin: 10px auto;
width: 735px;}

#banner{
width: 100%;
height: 279px;
margin: 0px auto;

background: URL('../images/global/banner.jpg') no-repeat;}

	#navigation{
	width: 200px;
	margin: 50px 0px 0px 330px;
	float: left;
	}
	
		#navigation li{
		display: inline;
		list-style-type: none;
		float: left;
		margin-left: 20px;}
		
			#navigation li a{
			color: #CCCCCC;
			font-family: "Tahoma", "Verdana", sans-serif;
			font-size: .70em;
			text-decoration: none;}
			
				#navigation li a:hover{text-decoration: underline;}
			
	#logo{
	display: block;
	width: 180px;
	height: 82px;
	float: right;
	margin: 0px;
	}
	
	#changesmile{
	display: block;
	width: 228px;
	height: 75px;
	
	float: right;
	clear: both;
	margin: 100px 60px 0px 0px;
	
	
	}

I appreciate your help!

Full Excel VBA Course - Beginner to Expert

<body Topmargin="0" Bottommargin="0" Leftmargin="0" Rightmargin="0">

Similar Tutorials

View Content

I'm taking over a departmental web page that has a whole bunch of
Code:

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page?

I've searched all over and can't find a reasonable resolution. Thanks

Br Clear="all" Internet Explorer

Similar Tutorials

View Content

Hi,

I have a design where I want the content and right menu to stretch so they're both the same height. I used <br clear="all" /> and it looks exactly how I want it to in Firefox but IE doesn't work. I searched Google to see if I could find issues regarding <br clear="all" /> functionality in IE but couldn't find anything that helped. Does anyone have any ideas? I appreciate any input. Thanks.

http://www.dirtybbq.com/test.html

css:
http://www.dirtybbq.com/css/test.css

Replacing <img> Tag With <div Style="background-image: ;"> For Speed Improvements?

Similar Tutorials

View Content

Hi there,

I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in).

I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds?

So for example...

before
Code:

<img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" />

after
Code:

.thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}

<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>

Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts

<table Border="1" Cellpadding="2" Cellspacing="0"> In Css

Similar Tutorials

View Content

what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css?

i've tried
PHP Code:
table
{
    border-spacing: 0px;
    padding: 0px;
    border-colapse: colapse;
    border-style: solid;
    border-width: 1px;
}
td
{
    border-style: solid;
    border-width: 1px;
    padding: 2px;
}

That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well.

Css Style <input Type="submit"

Similar Tutorials

View Content

I found this great website that shows me how to create these great buttons with some images.
http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/

How can I do this with a button instead of a link???

Div Style="overflow:auto;" And Scrollbars

Similar Tutorials

View Content

Is there a method or property which will tell me if the above div has visable scrollbars?

I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed.

Style="width: 24%" Not Working In Mozilla

Similar Tutorials

View Content

I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla.

Here is the code sample:

<DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV>

I have attached both screen shots of IE and Mozilla.

Can anyone help me ??

Div Problem In Firefox <div Style="{ ...}">abc</div>

Similar Tutorials

View Content

Hi,
Im using CSS, and have included the code in a separate .css file.

The whole website uses DIVs and is displaying correctly in both I.E. and Firefox.

Now, I need to generate a dynamic DIV using PHP, so I did this to test it out,

Code:

<div style="{ background: #00cc00; width:100%; height:100%;}">abc</div>

But the problem is that it displays correctly in I.E. but not in FIREFOX, all the attributes that I have specified within the style="{}" tag are NOT at all applied in FIREFOX.

Only the text "abc" is displayed in firefox and the style, including the background colour is not applicable at all!

Please tell me what Firefox is upto?

Thanks!

Your sisncerely,
mbk,
mbkweb.

[cakephp] Can't Get The Content"area" To Be The Correct Width "fluid"

Similar Tutorials

View Content

I'm using the CakePHP framework to build my site.

I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width.

Here's what it's supposed to look like.
http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user..

Here's what I currently have.
http://planet-rpg(dot)com

Here's my coding.

html
Code:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
      <title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
      <?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
  <div id="frame">
     <div id="container">
       <div id="main_content">
            <p>Content area</p>
       </div>
     </div>
  </div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>

css
Code:

html {
	background: #2b435d;
}

html, body {
	margin: 0;
}

body, table {
	color: #303030;
	
}

img { border: 0; }

#body {
	background: #d8dde8;

	padding: 0 0 16px;
}

#page-wrap {
	min-width: auto;
	margin: 10px auto;
	}

#frame {
    margin: 0 auto;
    padding: 0px 1170px 0px 220px;
    margin-top: -17px;

}
#main_content {
	background-color: #fff;
}


#header {
	background: url("../img/header.png") repeat-x bottom left;
	height: 64px;
	margin-top: 36px;
}
#navigation {
   background: url("../img/navigation.png") repeat-x bottom left;
   height: 31px;
   margin-top: -20px;
   font-family: "Arial", sans-serif !important;
   font-size: 14px;
   color: #fff;
   text-shadow:-1px -1px 0 black;
   list-style-type: none;
   padding:1px 5px 1px 220px;
}
#navigation li {
	float: left;
}

#navigation li a {
	border-left: 2px solid #303030;
    text-shadow:-1px -1px 0 black;
	color: #D0D0D0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	display: block;
	height: 21px;
	padding: 6px 12px 1px;
}

#navigation li a:hover {
	color: white;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first {

	padding-left: 236px;
	margin-left: -236px;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first a {
	background: url("../img/cursor.png")bottom center no-repeat; height:24px;
	color: #6193c7;
	border: 0;
	text-shadow:-1px -1px 0 black;
}

#logo {
	width: 166px;
	height: 50px;
	margin-top: -32px;
	margin-left: 20px;

	position: absolute;
	z-index: 2;
}

#footer {
	background: #607080 url("../img/footer.png") repeat-x;
	height: 60px;
	padding: 30px 0;

	clear: both;
}

#top_bar {
	background: url("../img/top_bar.png") repeat-x bottom left;
    height: 36px;
	font-family: "Arial", sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;

    height: 36px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed.

Hope someone can help me with my question.

Element Is "block" In Ie, "inline" In Ff, Why? (was "need A Bit Of Css Help?")

Similar Tutorials

View Content

http://stuweb.cms.gre.ac.uk/~as234/full/full.htm

some problems:

in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok!

in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image!

the background colour should be grayish however that DOESNT happen!

Firefox Alignment Of <div>'s, After "first Load" Or "hard Refresh".

Similar Tutorials

View Content

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Implementing Style="background-repeat: No-repeat" Property In Mozilla

Similar Tutorials

View Content

Hello everybody,

I used the following line

<td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td>

and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla:

<td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img>

but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla?

Css Nav <li Id=""> Or <li Class=""> Not Working In Firefox Or Netscape

Similar Tutorials

View Content

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav">
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div>

Pretty straight forward, now my css

PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
}
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav li
{
    float: left;
    text-align: left;
}

#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;

}
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

}
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

}

Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Pure Css Site: Still Necessary To Have Height="82" And Width="82" In <img ... /> ?

Similar Tutorials

View Content

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?

Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Can Div "inherit" An "auto" Height

Similar Tutorials

View Content

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

Ok To Have <ul Id="">...</ul> Directly In Body Or Must I Do <div Id="same"><ul>... ?

Similar Tutorials

View Content

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

"#id A" Overwrites ".class"?

Similar Tutorials

View Content

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

<img Src="" Width="50">keeps Coming

Similar Tutorials

View Content

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed

Using " In Style Sheets

Similar Tutorials

View Content

When i specify any background images i never use "" around the location. The reason being is that ive heard this can cause problems in earlier browsers. Can someone confirm what ive heard about this or let me know if there is actually any effect of using ".

Cheers

Style="position: Absolute ......???

Similar Tutorials

View Content

What i want to do is have a block set to the exact width and height that i want. I am trying to find it on w3schools and cant seem to get anywhere.

When i use the code below it works great, untill i enter text to it. i want the height of the block to be 15 pixels, the text is set at 12 in the external stylesheet. When i add the text it makes it about 25px or something... does this have something to do with clip?

Line-height also makes no differences.

This is my attempt at getting rid of my smaller tables

Code:

<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>

stylesheet
Code:

h5 
{ 
padding: 0px;
FONT-WEIGHT: bold;
text-align: center;
font-size: 12px }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left }

here is the basic idea of the site

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Kingdoms-Tester</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />

<title></title>

</head>
<body>

<div style="position: absolute; left: 0px; top: 0px; background-color: TRANSPARENT; padding: 0px;">

<!--A very large mess of tables in here for my navigation bar at the top-->

</div>


<!--I want to have a lot of blocks (such as below) in here i was hoping to do with absolute positions and place them where i want.  Its basically a multi columned theme with a bunch of sections-->



<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>

<div style="position: absolute; top; 2px; left: 617px; width: 147px; height: 30px; background-color: transperant; padding: 0px;">
<h5 style="padding:0px;margin:3px;">Click here to join the community!</h6>

</div>

</body>
</html>

thanks for any help!