Gaps between divs tags in IE8
I designed a custom Facebook welcome page in DW and transfered it to FB. According to BrowserLabs, it looks fantastic on every browser and platform except IE8, which shows horizontal gaps between each div. I have tried and tried and can not find a solution. Thank you so much for your help.
http://www.facebook.com/RiverCoyoteDesign
Here is the entirety of the code:
<style type="text/css">
#wrapper {
margin: 0px auto;
padding: 0px;
width: 520px;
height: 703px;
.like-us {
height: 112px;
.quote {
height: 112px;
width: 157px;
float: left;
a img {border:none;}
.bot-nav {
.below-like {
height: 55px;
.clearfloat {
margin: 0px;
clear: both;
height: 0px;
}.web-design {
height: 171px;
.below-web {
height: 57px;
.logo-design {
height: 211px;
.below-logo {
height: 43px;
.nav {
background-color: #050c0f;
</style>
<div id="wrapper">
<div>
<div class="like-us"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_01.jpg" width="363" height="112" /><a href="http://www.rivercoyotedesign.com/quote.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_02.jpg" width="157" height="112" /></a></div>
</div>
<div class="below-like"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_03.jpg" width="520" height="55" /></div>
<div class="web-design"><a href="http://www.rivercoyotedesign.com/portfolio.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_04.jpg" width="520" height="171" /></a></div>
<div class="below-web"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_05.jpg" width="520" height="57" /></div>
<div class="logo-design"><a href="http://www.rivercoyotedesign.com/logos.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_06.jpg" width="520" height="211" /></a></div>
<div class="below-logo"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_07.jpg" width="520" height="43" /></div>
<div class="nav">
<div class="bot-nav"><a href="http://www.rivercoyotedesign.com/portfolio.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat1_01.png" width="162" height="19" /></a><a href="http://www.rivercoyotedesign.com/logos.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_02.png" width="131" height="19" /></a><a href="http://www.rivercoyotedesign.com/enews.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_03.png" width="227" height="19" /></a></div>
<div class="bot-nav2"><a href="http://www.rivercoyotedesign.com/business-cards.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_04.png" width="221" height="37" /></a><a href="http://www.rivercoyotedesign.com/ecommerce.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_05.png" width="124" height="37" /></a><a href="http://www.rivercoyotedesign.com/" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_06.png" width="175" height="37" /></a></div></div>
</div>
"BruceCSI2" <[email protected]> wrote in
message
news:fgnj8t$pan$[email protected]..
>I set up this demo page,
http://www.mistchild.com/gruen/index.htm
and there
>are
> gaps between divs when viewed in IE, but not Opera or
FF. The weird thing
> is,
> they show up between the themepic div and the nav div,
and between the
> content
> div and bottom div, but not between the nav div and the
content div. I've
> set
> top margins of 0 for all divs in my stylesheet.
> Can anyone help me figure this one out?
Your construct is really "weird", try this:
#nav,#content,#bottom{float:none}
img{vertical-align:bottom}
If that fixes your problem, then you can simply *remove* the
float
declarations from your sheet.
As a side note, you should try to keep things as simple as
possible. I'm
sure you can safely remove "position:relative" from many
rules. Also, there
is no need to set a width on DIVs that are not floats (their
natural
behavior is to fill the the parent container).
HTH,
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- divaGPS - Add "you are here" highlighting to virtually any
menu
- divaFAQ - Create FAQ pages that toggle (show/hide) the
answers
- divaPOP - Easy, clean, standards-compliant popup windows.
Similar Messages
-
Remove spacing between div tags
Is it possible to remove the spacing between div tags? If so
how do you do it?Can you just post a link to the page rather than the mangled
poo that the
webforum hands us? (see below)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"lockw" <[email protected]> wrote in message
news:[email protected]...
> Here is the code I am working with. i am trying to
remove the spacing
> between
> the header and the left and right navigation.
>
> <!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=UTF-8" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> #container {
> margin: auto;
> width: 990px;
> }
>
> #container #left {
> background-color: #999999;
> background-position: top;
> float: left;
> width: 200px;
> padding-right: 15px;
> padding-left: 15px;
> border-right: 1px solid #666;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> margin-left: 0px;
> }
> #container #left ul {
> list-style: none;
> margin: 0;
> padding: 0;
> }
> #container #left ul li {
> margin: 0;
> border-top: 1px solid #003;
> }
> #container #left ul li a {
> display:block;
> padding: 2px 2px 2px 0.5em;
> border-right:1px solid #69C;
> border-bottom: 1px solid #369;
> background-color: #036;
> color: #fff;
> text-decoration:none;
> width:100%;
> }
> html>body #container #left a {
> width:auto;
> }
> #container #left ul li a:hover {
> border-right: 1px solid #69c;
> border-bottom: 1px solid #369;
> background-color: #69f;
> color:#fff;
> }
>
>
>
>
>
>
> #container #main {
> margin-top: 0px;
> margin-right: 250px;
> margin-bottom: 0px;
> margin-left: 250px;
> }
> #container #right {
> background-color: #666666;
> float: right;
> width: 200px;
> padding-left:15px;
> padding-right:15px;
> }
> #container #header {
> background-color: #003366;
> float: none;
> clear: none;
> margin-bottom: 0px;
> }
> .style1 {color: #CCCCCC}
> .style2 {color: #FFFFFF}
> body,td,th {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10pt;
> }
>
> #container #footer {
> float: none;
> clear: both;
> }
> a:link {
> color: #000099;
> text-decoration: underline;
> }
> a:visited {
> text-decoration: underline;
> }
> a:hover {
> text-decoration: none;
> color: #666666;
> }
> a:active {
> text-decoration: underline;
> }
> #container #right #rightnavtop {
> }
> #container #right #rightnavtop ul {
> list-style: none;
> margin: 0;
> padding: 0;
> }
> #container #right #rightnavtop ul li {
> margin: 0;
> border-top: 1px solid #003;
> }
> #container #right #rightnavtop ul li a {
> display:block;
> padding: 2px 2px 2px 0.5em;
> border-right:1px solid #69C;
> border-bottom: 1px solid #369;
> background-color: #036;
> color: #fff;
> text-decoration:none;
> width:100%;
> }
> html>body #container #right #rightnavtop a {
> width:auto;
> }
> #container #right #rightnavtop ul li a:hover {
> border-right: 1px solid #69c;
> border-bottom: 1px solid #369;
> background-color: #69f;
> color:#fff;
> }
>
> -->
> </style>
> </head>
>
> <body>
>
> <div id="container">
> <div id="header">
> <p class="style1">Header</p>
> <p> </p>
> <p> </p>
> </div>
> <div id="left">
>
>
<a href="#">Pharma</a></li>
>
<a href="#">Diversity</a></li>
>
<a href="#">Marketing</a></li>
>
<a href="#">Sales</a></li>
>
<a href="#">Money</a></li>
>
<a href="#">Stock</a></li>
>
</li>
>
<a href="#">Advertising</a></li>
>
</li>
> <p>lklkmklml</p>
>
> </div>
>
> <div class="style2" id="right">
> <div id="rightnavtop">
>
>
<a href="#">Real Estate</a></li>
>
<a href="#">Commercial Real Estate</a>
>
>
<a href="#">Recruitmen</a></li>
>
> </li>
>
> </div>
> <p><br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> <br />
> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p><br />
> </p>
> </div>
> <div id="main">
>
> <p>The main content will go here The main content
will go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here The
main content will
> go
> here The main content will go here The main content will
go here The main
> content will go here The main content will go here
<br />
> </p>
> <p> </p>
> <p><br />
> <br />
> <br />
> <br />
> </p>
> </div>
> <div id="footer">
> <p>
<br />
> Advertising Categories: <a
href="#">Residential Real Estate</a> |
> <a
> href="#">Commercial Real Estate</a> | <a
href="#">Recruitment</a> | <a
> href="#">Small Business</a> | <a
href="#">Automotive</a> | <a
> href="#">Franchise</a> | <a
href="#">Legal</a> | <a href="#">Obituary</a>
> | <a
> href="#">Online Verticals</a></p>
> <p>
Audience: <a href="#">Profiles</a> | <a
> href="#">Circulation</a> |
> <a href="#">Testimonials</a> </p>
> <p>
Solutions: <a href="#">Small Advertiser</a> |
<a
> href="#">Medium
> Advertiser</a> | <a href="#">Larger
Advertiser</a>| <a
> href="#">Advertisment
> Dimensions</a></p>
> <p>
Purchase Now: <a href="#">Purchase
Now</a></p>
> </div>
> </div>
> </body>
> </html>
>
> -
CSS wierds - spaces between div tags
Safari v4.0.4
I'm seeing spaces between div tags that are not appearing in FF3.x or IE7&8
I have inspected these tags and I can not locate where or what might be pushing the div's appart..
Example: http://dev7.esonicspider.net/facility_overview.html
Notice the black bar under "Prepare For Frequent Infection Control...." sub title in the header
The image is 800x209px and the div is defined as the same:
div#splashfacilityov { position:relative;
background:url('images/facility_header.jpg') 0 0 no-repeat;
width:800px;
height:209px;}
..the next div in the stack is:
div#submenubar { position:relative;
background:url('images/submenu_bkgr.jpg') 0 0 no-repeat;
width:800px;
height:24px;}
I have played around with both and can not see why that 20px bar is there between the two div's
Any hints as to what Safari needs here..??
Thanks John...Found that
@charset "UTF-8";
in the style sheet was the main problem.. -
Hello Dreamweavers.
Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.
Ive seen some articles where it says to add:
margin: 0;
padding: 0;
Im doing so, but im still getting that gap on the top.
this is my CSS
#box1 {
background-color: #00F;
height: 200px;
width: 600px;
padding: 0px;
margin: auto;
I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.You could try adding the following to the top of the CSS
margin: 0;
padding: 0;
or better still, add a normalise script as in
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
audio:not([controls]) {
display: none;
height: 0;
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
[hidden] {
display: none;
/* ==========================================================================
Base
========================================================================== */
* 1. Prevent system color scheme's background color being used in Firefox, IE,
* and Opera.
* 2. Prevent system color scheme's text color being used in Firefox, IE, and
* Opera.
* 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 4. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
html {
background: #fff; /* 1 */
color: #000; /* 2 */
font-size: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
-ms-text-size-adjust: 100%; /* 4 */
* Address `font-family` inconsistency between `textarea` and other form
* elements.
html,
button,
input,
select,
textarea {
font-family: sans-serif;
* Address margins handled incorrectly in IE 6/7.
body {
margin: 0;
/* ==========================================================================
Links
========================================================================== */
* Address `outline` inconsistency between Chrome and other browsers.
a:focus {
outline: thin dotted;
* Improve readability when focused and also mouse hovered in all browsers.
a:active,
a:hover {
outline: 0;
/* ==========================================================================
Typography
========================================================================== */
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
h1 {
font-size: 2em;
margin: 0.67em 0;
h2 {
font-size: 1.5em;
margin: 0.83em 0;
h3 {
font-size: 1.17em;
margin: 1em 0;
h4 {
font-size: 1em;
margin: 1.33em 0;
h5 {
font-size: 0.83em;
margin: 1.67em 0;
h6 {
font-size: 0.67em;
margin: 2.33em 0;
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
abbr[title] {
border-bottom: 1px dotted;
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
b,
strong {
font-weight: bold;
blockquote {
margin: 1em 40px;
* Address styling not present in Safari 5 and Chrome.
dfn {
font-style: italic;
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
* Address styling not present in IE 6/7/8/9.
mark {
background: #ff0;
color: #000;
* Address margins set differently in IE 6/7.
p,
pre {
margin: 1em 0;
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
* Improve readability of pre-formatted text in all browsers.
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
* Address CSS quotes not supported in IE 6/7.
q {
quotes: none;
* Address `quotes` property not supported in Safari 4.
q:before,
q:after {
content: '';
content: none;
* Address inconsistent and variable font size in all browsers.
small {
font-size: 80%;
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
sup {
top: -0.5em;
sub {
bottom: -0.25em;
/* ==========================================================================
Lists
========================================================================== */
* Address margins set differently in IE 6/7.
dl,
menu,
ol,
ul {
margin: 1em 0;
dd {
margin: 0 0 0 40px;
* Address paddings set differently in IE 6/7.
menu,
ol,
ul {
padding: 0 0 0 40px;
* Correct list images handled incorrectly in IE 7.
nav ul,
nav ol {
list-style: none;
list-style-image: none;
/* ==========================================================================
Embedded content
========================================================================== */
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
* Correct overflow displayed oddly in IE 9.
svg:not(:root) {
overflow: hidden;
/* ==========================================================================
Figures
========================================================================== */
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
figure {
margin: 0;
/* ==========================================================================
Forms
========================================================================== */
* Correct margin displayed oddly in IE 6/7.
form {
margin: 0;
* Define consistent border, margin, and padding.
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
button,
input {
line-height: normal;
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
button,
select {
text-transform: none;
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
* Re-set default cursor for disabled elements.
button[disabled],
html input[disabled] {
cursor: default;
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
* Remove inner padding and border in Firefox 3+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
/* ==========================================================================
Tables
========================================================================== */
* Remove most spacing between table cells.
table {
border-collapse: collapse;
border-spacing: 0; -
Removing Line between Div tags
Hi all. I am new to this forum - have just started using DIV Tags and am getting a bit messed up!! I have a simple web page that has 2 DIV statements - on loads a menu bar I have created in Fireworks and is rihgt justified, the other is a header that contains an image and is centred. I have specified a coloured page background. Trouble is, I have a line between my two div tags that shows the background colour! I just cant get rid of it - I have tried the "Display - Inline" but that doesn't work. I have tried "Float Left" and "Right" - no-good. I dont know what to do! It could be that I am using these commands in the wrong place? There seems to be quite a lot of stuff on the net about this issue but I cant get any of the solutions to work for me. Please can anyone help?
Here is an example of my 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #C90;
.menu {
BACKGROUND: #000000;
.header {
BACKGROUND: #000000;
</style>
</head>
<body>
<DIV class=menu align="right" >
<P> </P>
<P> </P>
</DIV>
<DIV class=header align= "center">
<P> </P>
<P> </P>
<P> </P>
</DIV>
</body>
</html>This is invalid markup.
<DIV class=menu align="right" >
</DIV>
<DIV class=header align= "center">
</DIV>
CSS should look like this:
body {
margin:0;
padding:0;
background: #C90;
color: #000;
#wrapper {
width: 970px; /**some value in px, % or ems**/
margin: 0 auto; /**with width, this centers page**/
background: #FFF;
border: 2px solid #000;
#menu {
background: #000;
text-align:right;
margin:0;
padding:0;
#header {
background: #000;
width: 970px;
margin:0 auto;
padding:0;
Then add the relevant selector ID (or .class) to your markup like so.
<body>
<div id="wrapper>
<div id="menu">
your menu code here
</div>
<div id="header">
your header here
</div>
<p>your content goes here<p>
<!--end wrapper--> </div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Can anyone help me figure out why my div named "#indexThmbs" is not sitting flush to the div above it named "#indexHeader1"
The purple body background color is coming through and I dont know why. There are no top/bottom margins on either divs so there should be no gap between the divs...I have no clue why this is happening.
I have posted the links to how the page SHOULD look (my JPG mock up)....
http://vojodesign.com/proofs/ARM/home.html
...and also my HTML file with the problem I'm talking about....
http://vojodesign.com/proofs/ARM
Thanks in advance.
KitHi Kit,
I made a quick look and it's quite messy or at least seems that your css needs to be optimized. Anyway a fast solution would be in #indexThmbsInner with your margin-top:65px change it to 0 like:
#indexThmbsInner {
height:130px;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:900px;
Also you declare many classes that do the same thing, so you can do this:
.indexThmb1, .indexThmb2, .indexThmb3, .indexThmb4 {
float:left;
margin-left:12px;
margin-top:65px; /* Notice I added the margin-top:65px; here */
text-align:center;
width:195px;
.indexThmb1 {
margin-left:12px;
.indexThmb2 {
margin-left:32px;
.indexThmb3 {
margin-left:33px;
.indexThmb4 {
margin-left:31px;
Probably there would be better ways to do it but as I mention it was just a quick look, also I haven't checked in IE just in FF but hope it helps
Cheers -
Gap between divs, but only in IE6
I created a page at
http://www.gruenconstruction.com/gallerycontemporary.htm
with a top, middle and bottom div (mainly). For some reason, in IE6
there's a huge gap between the middle and bottom divs. It looks
perfect in Opera, IE 7 and FF. I can't figure this out.Here I am at home. Can anyone help me out with this? Also,
does anyone know where I can get the exe file for IE6 so I can test
against it? -
Gap between divs issue when switching doc to html5
I have a banner div w/image and a nav bar div immediatly below it, both at 100% of container at 960px. I now have an annoying gap of about 5px between the two. I had switched the doc from xhtml 1.0 transitional to html5. When I switch the doc type back to 1.0, the gap goes away. Does anyone know why this might happen? Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
<div id="banner"><img src="images/imageone.jpg" width="959" height="132" alt="alt text"/>
</div>
<div id="navbar">
<ul id="site_nav" class="MenuBarHorizontal">
<li><a href="index.php">Main</a></li>
<li><a href="wp/index.php">Blog</a></li>
<li><a href="datasources.html">Data</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a> </li>
</ul>
</div>Quahog68 wrote:
Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
Yes, you need to add display: block; to the new html5 tags
<nav>
Whatver
</nav>
nav {
display: block
OOps sorry I read it as though you WERE using html5 tags ....... hmmmm you could still try adding display: block; to the banner and navigation <divs>
I'm also not sure why adding a html5 doctype would cause a gap. Maybe the image in the banner needs setting to display block as well. -
DIV and p (Gaps between them).
I'm sure that I'm missing something really obvious here:
I've attached the CSS that I'm using (external).
Using the WYSIWYG view, it's really hard to get it to do what
I want; I seem to have to ensure that I have a space below where I
want to put anything, check that the format is set to "none", then
I can set "start" - & enter my information. Then I can click in
the space, and do the same before entering the contents for "main".
However, if Dreamweaver helpfully adds some paragraph tags,
as it often does, it gives me a gap between "Start" & "main".
I've also found that if I don't have a blank line after the
bit that I'm trying to put in, then I end up with the insertion
point being unable to get "past" the final div tag, so I end up
with a div in a div, which isn't what I want.
I can use the code view to tweak to what I want, but I can't
help feeling that I'm missing something; either that the CSS is
wrong - so I should be able to have two paragraphs in adjoining div
touching each other, or something!
I'd found
http://archivist.incutio.com/viewlist/css-discuss/39227
- which suggested using div > p - but even though I tried with a
line-height of as low as 0.8 it didn't work, so I've obviously got
the wrong end of the stick (wrong stick most likely!)
EmmaEmma,
> I've worked it out! I don't *need* the div tags.
That's right.
> As long as I use p class = and then enter the text, I
can
> then get two different paragraphs to join & look
like a
> single body!
As a matter of fact, you don't even need class="something".
There are
various kinds of CSS selectors. One of them is known as a
class, which
requires the class="" attribute in your HTML and a dot in
front of the class
name in your CSS.
e.g.
.discussMain = { properties here }
Another kind is known as an element selector. That's where
you simply
use the name of an HTML element, such as p, as your selector.
You don't
need a dot, then, in your CSS for that rule.
e.g.
p { properties here }
Keep in mind, if you use an element selector, *all* elements
of that
type will be affected. If you only wanted to affect a dozen
<p> tags, but
not all, you could either give each of them a class attribute
and use a
class selector, *or* you could wrap all those <p> tags
in another tag --
say, a <div> -- then apply your class to the
<div>. This is partly what the
"cascading" means in Cascading Style Sheets.
<div class="something">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
.something p {
properties here
In the above, the HTML shows a way to corral together a
handful of <p>
tags. The CSS references all <p> tags that exist inside
any element whose
class attribute equals "something".
There are other ways to specify which parts of the HTML
should be
affected. See this Wikipedia entry for a good overview.
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
David
stiller (at) quip (dot) net
Dev essays:
http://www.quip.net/blog/
"Luck is the residue of good design." -
Gap in between divs in firefox
Hi there.
I'm working on a website and I have tested in both IE 7, and
Firefox v2.
In IE it looks as intended, but in Firefox, there is a gap
between the customer menu (with lime green background), and the Top
Menu bit (above the lime green). The customer menu in the css is
#user_title. The top menu is #topmenu
Similarly, right at the bottom, in between the end of the
content, and the footer, there is a white gap.
I'm not too sure why it is appearing. Below are links to
screenshots of each (sorry I haven't got an upload of the actual
site). Also, i've attached my CSS file to this post.
IE Preview
Firefox
Preview
If anyone can help me get rid of the gaps, that would be
great!
Thanks,
Craig.oO(craig_shaw)
>I uploaded it to a test server.
>
>The address is
http://www.lindendesign.co.uk/test/templates/header.html
>
>If anyone could help, that would be great.
In your CSS rule for "#user_title h1" change this
margin-left: 10px;
to this
margin: 0 10px;
The gap was caused by the h1 default top margin. Because of a
feature
called collapsing margins it was sticking out of the
#user_title div.
The new declaration takes care of this and sets both the top
and bottom
margin to zero.
BTW: The result in FF was the correct one, IE got it wrong
(as usual).
Micha -
Difference Between Insertions for Div Tags
Hi,
What is the difference between "after tag" or "after the start of tag" when inserting a div tag?
Is one included in the same "container" (div tag) and the other one just "follows" after the previous div tag?
Thanks,
njdesigner1944"after tag" inserts your div after the closing tag of the choosen div. The "after start tag" inserts the new div after the right after the tag you choose and before the close tags.
ie.
Lets say you want to insert a new div called #container with a #mainWrap div already on the page.
"after tag"
<div id="mainWrap"></div>
<div id="container"></div>
as you see it inserts after the closing div tag of #mainWrap
"after start of tag"
<div id="mainWrap"><div id="container"></div></div>
as you see it inserts #container after the start tag and before the close tag of # mainWrap -
How do I, or can I, do a rollover with, or between, three div tags?
Dear Dreamweaver forum:
I am currently using Dreamweaver CS3 on my MacBook Pro.
I am new to Dreamweaver and have been studying tutorials on Lynda.com at the "essential" level.
The series of Dreamweaver CS3 videos I have been following on Lynda.com are done by Garrick Chow.
However, what I still do not know how to do is link a shape to both an image and to text.
The shape, the image, and the text are all contained within their own div tags.
Why did I go so "div tag crazy"? It's because I went with what I can understand so far.
The concept of movable div tags, for me, was both one of the easiest concepts to understand and one of
the easiest things to create so far in my studies of Dreamweaver CS3.
Anyway, I think the image below pretty much spells out what I'm looking for
Any help would be appreciated. Thanks!
ScottYou can learn to code, pay the $99 to join the developers program, purchase a Mac if you don't have one (it's required to develop for iOS) and install the correct tools. There are a number of books available on the subject, some in the iBookstore, I'm sure.
-
Gap between Navigation area and top banner
I have a small gap between the navigation area and top banner
of my page design and I can't quite figure out what is causing
it... or how to fix it. Here is the page
Moonspinners
Tearoom. I know that this is probably a simple fix but I've
tried a few things and haven't hit on it yet. Thanks for any help
MaureenHello,
You are simply missing a closing </div> tag.
Change this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" />
<!--END BANNER DIV -->
</div>
To this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" /></div>
<!--END BANNER DIV -->
</div>
Notice the added </div> tag after "140" /> that was
missing.
-OR-
As you really don't even need the <div> around the
image (the wrapper is 750px and the image is 750px, so it's
centered already) you can:
Change this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" />
<!--END BANNER DIV -->
</div>
To this:
<div id="banner"><img src="images/bannerw_logo.gif"
alt="Moonspinners Tearoom" width="750" height="140" />
<!--END BANNER DIV -->
</div>
Take care,
Tim -
Getting rid of gap between title banner image and Spry Menu bar?
Hi,
Here's what I have so far :
http://www.artbywaqas.com/TEST/index.html
How can I get rid of the gap between the banner image and the menu below it?Please explain, what is the center element as in line 43 with the closing tag on line 94?
Also, wrapping the banner image in a paragraph element ensures that you will have a margin and/or padding above and below the element unless you specifically change the style rules to eleminate the marging and/or padding.
The quickest solution is to remove the center element (which does not exist) and change the paragraph elemnt to a div element.
Gramps -
Is this a bug for using DIV tag in adf page?
I'm using the version 11.1.1.2.0. And when I write the adf page code with empty content in div tag like this :
<div id="ex"></div>
<othertags>123</othertags>Then the code in randered page :
<div id="ex">
<othertags>123</othertags>
</div>Bug ?
Edited by: Derek.Jaa on 2010-4-21 上午4:00Hi Simon
Thanks for you help and I can't see the tag you suggested. Maybe you should make you code between tag, replace the [] with {} .
Maybe you are looking for
-
Hi all, trying to figure this out in REPORT BUILDER, but I guess I can go to VS if needed... I've got a data set that says "sales" and its basically order summarycontaining: id, dateplaced, and other stuff... I want to use this dataset to show trendl
-
Can not connect to craigslist website
Hi last week craiglist was working fine all this week it times out. the site is up a working ( pinged it ) I just can't get it on my desktop computer or my tablet. any ideals anyone ? Solved! Go to Solution.
-
Printing many pages per sheets
Hi! I have some kind of report to print. I want to be able to print up to 6 on a single page. I always have the same infos to print. They are as this: P.O. #: 000-001 By: Employee 001 Date: 01-01-2004 Product: 102103 Title: THIS PRODUCT NAME UPC: 123
-
Problems related to the device application Blackberry
Hi All I ma trying to create the sample application on Blackberry. I followed the following steps: 1. On sybase 1.5.2 workspace i created a mobile application project. 2. Dragged customer dba and sales order dba on the diagram scree. 3. Created the r
-
Converting crystel Reports DIA to Background
Hi All , I have issue with crystal report; we are created a crystal report through SAPBI, these reports are running In DIA (Dialogue) in SAP BI. I want to convert this reports to Background, Is there any way??? Praveen Yagnamurthy