gap between the div tags in firefox

Hello.

I'm working on a website and I've tested in IE 7 and Firefox v2.

In IE, it seems as planned, but in Firefox, there is a gap between customer menu (with green-yellow background) and the top Menu (at the top of the Green lime) bit. The client in the css menu is #user_title. The top menu is #topmenu

Similarly, at the bottom, between the end of the content and the footer, there is white space.

I don't know too why it makes its appearance. Here are links to the screenshots of each (sorry I don't have a download of the live site). Also, I have attached my CSS file for this post.

Overview of EI

Overview of Firefox

If anyone can help me to get rid of gaps, would be great!

Thank you

Craig

.oO (craig_shaw)

> I downloaded on a test server.
>
> The address is http://www.lindendesign.co.uk/test/templates/header.html
>
> If someone could help, that would be great.

In your CSS rule for '#user_title h1' change this

margin-left: 10px;

for this

margin: 0 10px;

The variance is due to the top margin of the h1 by default. Because of a characteristic
called collapse of the margins that it was coming out of the div. of #user_title
The new statement takes care of this and sets the top and bottom
margin to zero.

BTW: The result in FF was correct, IE wrong (as usual).

Micha

Tags: Dreamweaver

Similar Questions

  • spaces between the div tags

    I posted a few weeks on how to Center my site (that I had learned to design using all AP divs). I have redesigned my site now. Everything looks great in Firefox and Safari; but I'm having a problem with spaces between the div tags in Solution Explorer.

    Please see problem and source code here:
    http://www.renegadegraphics.biz/renegade_graphics_contact_us.htm

    There is a space under the banner div in the left sidebar. Can anyone help me please with this. I have the two fill and margins set to 0.

    Thanks in advance for your help.

    -Change

  • White space between the Div tags

    I use DW CS4.  I need to help, reducing the white space between the DIV tags  I have the white space between smaller gray line and my nav bar.  I see all the places where there are margins or padding.  Can anyone help?  Here's the code.  Thank you.

    < body bgcolor = "#CCCCCC" onload = "MM_preloadImages('..)." /_img/HOMEover.jpg ',' /_img/COMPANYover.jpg ','... / _img/PROJECTOR TSover.jpg ', '... CASE STUDIESover.jpg/_img / ','... / CONTACTUSover.jpg/_img ') ">"

    < div id = "container" >

    < div align = "left" >

    "" < p > < img src = "... / _img/Nute_Logo_tag_060612.gif" alt = "logo" name = "logo" width = "113" height = "74" hspace = "5" align = "absbottom" id = "logo" / > < / p >

    < / div >

    < div id = "header" > < / div >

    < div id = "content" > < / p >

    < table border = "0" cellpadding = "0" cellspacing = "0" >

    < b >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'bluebar',", 1) ' onmouseover = "MM_nbGroup ('over', 'bluebar',","1)" onmouseout = "MM_nbGroup ('out')" > < img src = "... / _img/bluebarup.jpg" alt = "" name = "bluebar" width = "118" height = "15" border = "0" id = "bluebar" onload = "" / > < /a > < table >

    "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'Home',", 1) ' onmouseover = "MM_nbGroup ('more', 'Home','... / _img/HOMEover.jpg ',", 1) "onmouseout ="MM_nbGroup ('out')"" > < img src = ""... / _img/HOMEup.jpg ' alt = "Click HOME to go to the home page" name = "home" width = "115" height = "15" border = "0" id = "home" onload = "" / > < /a > < table >

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down"," group1', 'society', ", 1) ' onmouseover =" MM_nbGroup ('more', 'society', "..") " "(/ _img/COMPANYover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/COMPANYup.jpg "alt ="Click to go to our services COMPANY"name ="company"width ="122"height ="15"border ="0"id ="company"onload =" "/ > < /a > < table >"

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down","Group 1","projects",", 1) ' onmouseover = "MM_nbGroup ('more', 'projects',..." "(/ _img/PROJECTSover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/PROJECTSup.jpg ' alt = 'PROJECTS click to see our projects' name = 'projects' width = "122" height = "15" border = "0" id = "projects" onload = "" / > < /a > < table > "

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'studies',", 1) ' onmouseover = "MM_nbGroup ('more', 'studies,'... / _img/CASE STUDIESover.jpg',", 1) "onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/CASE STUDIESup.jpg "alt ="click on the CASE STUDIES to see examples of projects' name = "added" width = "150" height = "15" border = "0" id = "added" onload ="" / > < /a > < table >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ("bottom", "group1', 'contactus',", 1) "onmouseover =" MM_nbGroup ('more', 'contactus','... / _img/CONTACTUSover.jpg ', ", 1)" onmouseout = "MM_nbGroup ('out')" > < img name = "contactus" src = "... / _img/CONTACTUSup.jpg" border = '0' alt = "" onload = "" / > < /a > < table >

    < /tr >

    "< / table > < img src =" "alt =" "name ="mainphoto1"width ="780"height ="264"id ="mainphoto1"/ >

    Thank you for all your help.  I solved it by adding a padding to my header (grey line).

  • How to get rid of the space between the div tags in Safari?

    Hello.  I'm designing a website with CSS and there is a space appears between two divs seen in Safari, but not in IE (the space appears between the header at the top tag and the container below. I spent hours trying to solve this problem, without success, and I am really frustrated. I am new to DW and not very good at code, so if someone can please shed a light on how to solve this problem, I would be very grateful.

    I have attached the page in question. Any help much appreciated!

    R

    I hate this rule since it removes the default margins of everything.  But you're definitely on the right track.  What is happening is that the margins by default of the first and the last tag in the DIV does NOT collapse as it should and is pushing out.  You can fix this in a number of ways, including the way you suggested.  Another way would be to complete some padding the divs, or a border for the divs, or just set the margins on these specific tags (those in the divs) to zero.  For example, try this code with and without the style sheet embedded in Safari-


    Test


    Test

  • Spacing between the div tags in unwanted IE

    I am in the early stages of laying on a website in CSS and I've encountered a problem. I have a "header" div and a "nav" div directly stacked on each other. When I test in firefox, everything looks fine but in IE there is a space that I can not do disappear for the life of me.

    Here are links to the page and the CSS file:
    http://www.sethglass.NET/luster/lusters_temp.html
    http://www.sethglass.NET/luster/CSS/001.CSS

    Help is greatly appreciated! Thank you

    Add this to your style sheet-

    #header img {display: block ;}}

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.dreamweavermx-templates.com - template Triage!
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================

    "sgl0ss" wrote in message
    News:e35ctb$5TM$1@forums. Macromedia.com...
    > I'm in the early stages of laying on a website in CSS and I
    > already
    > ran into a problem. I have a stacked "header" and "nav" div div
    > directly on
    > On the other albums. When I test in firefox, everything seems fine, but in
    > IE
    > there is a space that I can not do disappear for the life of me.
    >
    > Here are links to the page and the CSS file:
    > http://www.sethglass.net/luster/lusters_temp.html
    > http://www.sethglass.net/luster/css/001.css
    >
    > Help is greatly appreciated! Thank you
    >

  • Justify the Divs to the left and right of the page with the gaps between the two. Possible?

    I have 4 eponymous divs with different images and rollover Javascript on them, spread horizontally on my page effects.

    I'm trying to align their so there are gaps between each div, but NO space on the right and left side, so that they are tight to the edge. If I put a margin on the right side of 5px, for example, the div right hand still has a gap of 5px, otherwise he's going on the next line.

    Of course, I can make a new rule for the div of the right hand with no margin to the right, but this will make more complex Javascript code with perform effect hover on two types of divs.

    Is it possible to pin the divs to the left and right of the page with an 'auto' margins inbetween them?

    Untitled.jpg

    I found a solution in any case. I've adjusted to the width of the div so that they coincide closely each side. Then align the images (HTML) 'Left, middle, Hugo, right' so that they are tight against each side and have differences even between them. If all goes well, there is no flaws with this method, it seems to work pretty well.

  • Gap between the header and spry menu bar (school project)?

    Hello I have a project for school and they want me to a dw premade layout html, with a header image, and a spry menu bar located in the header. Which I did, but there is this small gap between the header image and the spry menu bar and the header that I can't get rid of. There is no additional line break tag or paragraph in there, I have NO idea what is wrong, please help if you know. Thank you.

    Joint below is code html and css. Sorry there all text in dw premade in there too. Basically, I have also attached the css external to the spry menu bar, and the page just in case.

    <! DOCTYPE HTML >

    < html >

    < head >

    < meta charset = "UTF-8" >

    < title > Rapids Transit - Buffalo River Outfitters < /title >

    < link href = "css/rapids_transit.css" rel = "stylesheet" type = "text/css" > "

    < style type = "text/css" >

    <!--

    {body

    Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.

    Background: # 42413;

    margin: 0;

    padding: 0;

    Color: #000;

    }

    / * ~ ~ Tag of the element selectors ~ ~ *.

    UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

    padding: 0;

    margin: 0;

    }

    H1, h2, h3, h4, h5, h6 {p}

    margin-top: 0;     / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

    padding-right: 15px;

    padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */

    }

    an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

    border: none;

    }

    / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

    a: link {}

    color: # 42413.

    text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

    }

    a: visited {}

    color: #6E6C64;

    text-decoration: underline;

    }

    a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

    text-decoration: none;

    }

    / * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.

    . Container {}

    position: relative;

    Width: 960px;

    Background: #FFF;

    margin: 0 auto; / * set to auto on the sides, coupled with the width, the layout centres * /.

    }

    / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

    . Header {}

    background-color: #fff;

    padding-right: 5px;

    padding-left: 5px;

    }

    / * ~ ~ It's layout information. ~~

    (1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

    */

    . Happy {}

    padding-top: 10px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0;

    }

    / * ~ ~ Footer ~ ~ * /.

    .footer {}

    padding: 10px 0;

    background: #CCC49F;

    }

    / * ~ ~ various float/clear classes ~ ~ * /.

    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

    float: right;

    left margin: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

    Clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    ->

    < / style >

    < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

    < link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "

    < style type = "text/css" >

    {#river_level}

    position: absolute;

    left: 500px;

    top: 325px;

    Width: 245px;

    height: 80px;

    z-index: 1;

    background-color: #ffcc33;

    border-top-style: inset;

    border-right-style: inset;

    border-bottom-style: inset;

    border-left-style: inset;

    border-bottom-color: #960;

    border-right-color: #960;

    border-bottom-color: #960;

    border-left-color: #960;

    text-align: center;

    do-family: Verdana, Geneva, without serif.

    font-size: medium;

    }

    < / style >

    < / head >

    < body >

    < div class = "container" >

    < div class = "header" > < a href = "#" > < img src = "assets/rt_banner.jpg" alt = "Banner Rapids Transit" width = "950" height = "120" / > < / a > "

    < ul id = "MenuBar1" class = "MenuBarHorizontal" >

    < li > < a href = "index.html" > home < /a > < /li >

    < li > < a href = "guides.html" > our Guides < /a > < /li > ""

    < li > < a href = "rates.html" > rates < /a > < /li > ""

    < li > < a href = "lodging.html" > Lodging < /a > < /li > ""

    < li > < a href = "before.html" > Before You Go < /a > < /li > ""

    < /ul >

    <! - end .header - > < / div >

    < div class = "content" >

    < p align = "left" class = "body_text" > welcome to rapid Transit. We are a rental service and canoe river guide located on the banks of the beautiful Buffalo River to Gilbert (Arkansas). We also offer kayak and raft rental. Our experienced guides will be pleased to offer trips on the river suitable for all levels - from beginner to expert. They will also be pleased to accompany you all the way! Stop at our country store and pick up your picnic supplies in the process of disappearance. We will even Pack it for you in airtight containers. (Just a precaution!) Call us to make your reservations. < /p >

    < p align = "left" class = "contact_info" > Rapid Transit < br / >

    Highway 55 North < br / >

    Gilbert, Arkansas 75497 < br / >

    (555) 365-5228 < br / >

    < a href = "mailto: " [email protected] ' > Mike Andrew < /a > < /p > .

    < h1 > < / h1 >

    <! - end content - > < / div >

    < div class = "footer" >

    < p > < em > Copyright 2000 - 2012 < br / >

    Last updated on

    <!-#BeginDate format: Am1-10 April 2012 > <!-#EndDate->

    You < /i > < / p >

    <! - end .footer - > < / div >

    <!-end .container-> < div id = "river_level" > current River Conditions: < br >

    good floating today < br >

    with a few spots of class II < / div > < / div >

    < script type = "text/javascript" >

    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

    < /script >

    < / body >

    < / html >

    -------------------------------------------------------

    ALSO, HERE IS MY EXTERNAL STYLESHEET

    {.body_text}

    do-family: Arial, Helvetica, without serif.

    do-size: 14px;

    make-style: normal;

    }

    {.paragraph_header}

    do-family: Arial, Helvetica, without serif.

    do-size: 14px;

    make-style: normal;

    make-weight: bold;

    color: #036;

    }

    {.contact_info}

    do-family: Arial, Helvetica, without serif.

    do-size: 14px;

    make-style: italic;

    Color: #000;

    }

    -----------------------------------------------------

    HERE'S MY SPRY MENU BAR CSS TOO

    @charset "UTF-8";

    / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

    / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

    /*******************************************************************************

    The AVAILABLE INFORMATION: Describes the box model, positioning, the order

    *******************************************************************************/

    / * The outermost container for the menu bar, an area of width auto without margin or padding * /.

    UL. MenuBarHorizontal

    {

    margin: 0;

    padding: 0;

    list-style-type: none;

    do-size: 14px;

    cursor: default;

    Width: auto;

    do-family: Arial, Helvetica, without serif.

    }

    / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */

    UL. MenuBarActive

    {

    z-index: 1000;

    }

    / * Menu item containers, position of children relative to this container and are a fixed width * /.

    UL. MenuBarHorizontal li

    {

    margin: 0;

    padding: 0;

    list-style-type: none;

    do-size: 100%;

    position: relative;

    text-align: center;

    cursor: pointer;

    Width: 190px;

    float: left;

    height: 25px;

    }

    / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.

    UL. MenuBarHorizontal ul

    {

    margin: 0;

    padding: 0;

    list-style-type: none;

    do-size: 100%;

    z index: 1020;

    cursor: default;

    Width: 8.2em;

    position: absolute;

    left:-1000em;

    }

    / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.

    UL. MenuBarHorizontal ul. MenuBarSubmenuVisible

    {

    left: auto;

    }

    / * Container of menu items are same fixed width parent * /.

    UL. MenuBarHorizontal ul li

    {

    Width: 8.2em;

    }

    / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.

    UL. MenuBarHorizontal ul ul

    {

    position: absolute;

    margin:-5% 0 0 95%;

    }

    / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.

    UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible

    {

    left: auto;

    top: 0;

    }

    /*******************************************************************************

    INFORMATION DESIGN: Describes the set of colors, borders, fonts

    *******************************************************************************/

    / * Submenu containers have borders on all sides * /.

    UL. MenuBarHorizontal ul

    {

    border: 1px solid #CCC;

    }

    / * Menu items are a light grey block with padding and no text decoration * /.

    UL. MenuBarHorizontal a

    {

    display: block;

    cursor: pointer;

    background-color: #2E9712;

    Padding: 0.5em 0.75em;

    color: #fff;

    text-decoration: none;

    }

    / Components menu that have mouse over or focus have a blue background and white text * /.

    UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

    {

    background-color: # 33;

    color: #FFF;

    }

    / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.

    UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

    {

    background-color: #3FA7A8;

    color: ##ffffff;

    }

    /*******************************************************************************

    Submenu INDICATION: styles if there is a submenu in a given category

    *******************************************************************************/

    / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

    UL. MenuBarHorizontal a.MenuBarItemSubmenu

    {

    background-image: url (SpryMenuBarDown.gif);

    background-repeat: no-repeat;

    background-position: 50 95%;

    }

    / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

    UL. MenuBarHorizontal ul a.MenuBarItemSubmenu

    {

    background-image: url (SpryMenuBarRight.gif);

    background-repeat: no-repeat;

    background-position: 50 95%;

    }

    / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.

    UL. MenuBarHorizontal a.MenuBarItemSubmenuHover

    {

    background-image: url (SpryMenuBarDownHover.gif);

    background-repeat: no-repeat;

    background-position: 50 95%;

    }

    / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.

    UL. MenuBarHorizontal ul a.MenuBarItemSubmenuHover

    {

    background-image: url (SpryMenuBarRightHover.gif);

    background-repeat: no-repeat;

    background-position: 50 95%;

    }

    /*******************************************************************************

    BROWSER HACKS: hacks below should not be changed, unless you are an expert

    *******************************************************************************/

    / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.

    UL. MenuBarHorizontal iframe

    {

    position: absolute;

    z index: 1010;

    Filter:alpha(opacity:0.1);

    }

    / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.

    @media screen, projection

    {

    UL. MenuBarHorizontal li. MenuBarItemIE

    {

    display: inline;

    f\loat: left;

    Background: #FFF;

    }

    }

    Add the below css to your styes css selector:

    . Header img {}

    display: block;

    }

    Change your padded 30px high 'content' css selector and also include clear: both; (as shown below).

    . Happy {}

    padding-top: 30px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0;

    Clear: both;

    }

  • Cannot get rid of the gap between the images in a table

    I'm pretty new to all this, but I use Dreamweaver CC, and I inserted a table. Inside that I dragged my images in the cells, made sure that the filling of the cell, spacing and the border are all reset to zero, and yet, when I preview it in Chrome and Firefox, there are gaps between the images. I'll paste the code below if that helps. Any ideas?

    <! doctype html >

    < html >

    < head >

    < meta charset = "utf-8" >

    < title > < /title > Home Page

    < style type = "text/css" >

    < / style >

    < / head >

    < body >

    < table width = "788" border = "0" cellspacing = "0" cellpadding = "0" >

    < b >

    < td width = "246" height = "154" > < img src = "images/image_01.jpg" width = "246" height = "154" alt ="" / > < table > "

    < td width = "542" > < img src = "images/image_02.jpg" width = "542" height = "154" alt ="" / > < table > "

    < /tr >

    < b >

    < td > < table >

    < td > < img src = "images/image_05.jpg" width = "542" height = "201" alt ="" / > < table > "

    < /tr >

    < b >

    < td > < img src = "images/image_11.jpg" width = "246" height = "400" alt ="" / > < table > "

    < td > < img src = "images/image_12.jpg" width = "542" height = "400" alt ="" / > < table > "

    < /tr >

    < b >

    < td > < img src = "images/image_13.jpg" width = "246" height = "75" alt ="" / > < table > "

    < td > < img src = "images/image_14.jpg" width = "542" height = "75" alt ="" / > < table > "

    < /tr >

    < /table >

    < / body >

    < / html >

    Simply put this style at the top of your page:

    IMG {}

    display: block;

    margin: 0;

    padding: 0;

    }

    This should dispel the spaces.

  • Need help - gap between the copyright &amp; footer

    I have a white space between the orange walk and the black box of the fair copyright above. I changed the 10 px 0 px and back to 10 px padding when he did nothing.


    I know I'm missing something simple. Can someone take a look and help out. Thank you.

    HTML code:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"

    <!-TemplateBeginEditable name = "doctitle"-->

    < title > Untitled Document < /title >

    <! - TemplateEndEditable - >

    <!-TemplateBeginEditable name = "head"->

    <! - TemplateEndEditable - >

    < style type = "text/css" >

    <!--

    {body

    Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.

    background-color: #4E5869;

    margin: 0;

    padding: 0;

    Color: #000;

    }

    / * ~ ~ Tag of the element selectors ~ ~ *.

    UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

    padding: 0;

    margin: 0;

    }

    H1, h2, h3, h4, h5, h6 {p}

    margin-top: 0;           / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

    padding-right: 15px;

    padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */

    }

    an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

    border: none;

    }

    / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

    a: link {}

    color: #414958;

    text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

    }

    a: visited {}

    color: #4E5869;

    text-decoration: underline;

    }

    a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

    text-decoration: none;

    }

    / * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.

    . Container {}

    Width: 80%;

    Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */

    min-width: 780px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */

    background-color: #FFF;

    margin: 0 auto; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */

    }

    / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

    . Header {}

    background-color: #6F7D94;

    }

    / * ~ ~ It's layout information. ~~

    (1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

    */

    . Happy {}

    padding: 10px 0;

    color: #FFF;

    }

    / * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.

    . Content ul, ol {} content

    padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */

    }

    / * ~ ~ Footer ~ ~ * /.

    .footer {}

    background-color: #b27300;

    Clear: both;

    padding-top: 10px;

    padding-right: 0px;

    padding-bottom: 10px;

    padding-left: 0px;

    }

    {.copyrightblack}

    background-color: #000;

    height: 50px;

    Width: 1260px;

    make-weight: bold;

    text-transform: uppercase;

    text-decoration: none;

    vertical-align: middle;

    do-family: "Helvetica Neue";

    do-size: 16px;

    Bottom: 0px;

    position: relative;

    }

    / * ~ ~ various float/clear classes ~ ~ * /.

    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

    float: right;

    left margin: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

    Clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    . Container content p {}

    do-family: "Helvetica Neue";

    }

    . Container content p {}

    make-weight: bold;

    Color: #000;

    }

    . Container content table tr td div {}

    color: #FFF;

    make-weight: bold;

    }

    ->

    < / style >

    < / head >

    < body >

    < div class = "container" >

    < div class = "header" > <! - end .header - >

    < div class = "content" id = "copyrightblack" > < / div >

    < / div >

    < div class = "content" >

    < p > <! - end content - >

    <!-->

    < /p >

    <!-TemplateBeginEditable name = 'content'->

    < /p > < p > content

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    <! - TemplateEndEditable - >

    < p > < / p >

    < div class = "copyrightblack" >

    < div align = "center" > © 2013 NDP < / div >

    < / div >

    < / div >

    < div class = "footer" >

    < p > < / p >

    <! - end .footer - > < / div >

    <! - end .container - > < / div >

    < / body >

    < / html >

    It is the padding here

    . Happy {}

    color: #FFFFFF;

    padding: 10px 0;

    }

    You should also reduce the width of 1260 here to 805

    {.copyrightblack}

    background-color: #000000;

    bottom: 0;

    do-family: "Helvetica Neue";

    do-size: 16px;

    make-weight: bold;

    height: 50px;

    position: relative;

    text-decoration: none;

    text-transform: uppercase;

    vertical-align: middle;

    Width: 1260px;

  • cfform/cfinclude causing the unsightly gap between the tables

    I'm working through a problem that I have a cfform/cfinclude statement causing a gap between menu items. I inherited to support this site and I didn't design it. It was designed using tables to create the layout and navigation that are implemented using cfincludes menus. Here is an example of the problem (code included below). There is a gap between the horizontal menu that starts by contacting us and left navigation menu which starts by find a State Park.

    When I move the cfform tags while they are inside the table tags, the gap goes away, but then my user that modifies the content through Contribute, has a problem with text being pushed far down and to the right, making it difficult for her to change. I tried to move the tags in a variety of ways, and each of them is causing the gap or push the text down to the right in the design editor.

    We do not have the resources to put me in time that is needed to actually solve this problem by getting rid of the layout of the table and moving the CSS layout, because this problem appears on more than a hundred pages (which many have a fairly consistent coding for me just do a successful search and replace). I would fix - rather - straight, but I can't.

    I had reason to conclude that there is no way to stop the cfform tag to put a space between the table tags?

    Quote:
    Posted by: newsgroup user
    Just add style = "margin: 0;" to the

    Tag, or in your css file add
    form {margin: 0 ;}}

    Weird. I tried both of those in front, but apparently I didn't was not put it in the right places because put the style in the tag worked a treat. Thank you very much.

  • U2415, around the gap between the Windows desktop and the edge of the monitor (bezel)

    Hello

    I have a Dell Ultrasharp U2415. I've read all the FAQS and I know I have to perform the SUBMISSION, but before doing so, I just want to know if it is normal to have a gap between the Windows desktop and the edge of the screen. If the Windows desktop is not covering or fill the entire screen. There all around the smaller than a 1/4 "gap between the edge of the windows desktop on the edge of the bezel of the monitor, and this model has almost no bezel. The graphics settings in Windows 10 are set to use the native resolution of 1920 x 1200 monitor. I tried with different computers (all windows 10), and the drivers are up to date. The monitor is connected via HDMI since I don't have portable computers not with DP interfaces. Laptop computers have Intel and ATI video cards. I have check the put option to scale on the video card software and it is set to 100%. So, is this gap normal? Is the edge Office Windows 10 supposed to touch the physical edge of monitors?  If the gap is not normal, I will perform the integrated test.

    TIA!

    Based on the YouTube comments, which seems to be normal. "But you must run the APPLICATION to see if the"smaller than 1/4"gap" appears. If Yes, then we can say that it is normal. If this is not the case, then some settings of the operating system is the culprit.

  • the gap between the list of select items in af:selectOneRadio?

    Hi all

    My version of Jdeveloper is 11.1.1.7.0.

    I have an af:selectOneRadio and select the button elements are added to this radio. But if we have four values then there is no space between each value of the element vertically.

    How to provide the gap between the value of each item select vertically?

    How can I achieve this requirement?

    Please provide your valuable suggestions.

    Thank you.

    This is not a style class but a skin selector, you need to add in your own skin file. Instructions on how to create a skin file based on an existing one are in the article that I posted the link.

    Here's what I see

    Timo

  • Disorder by selecting the Div tags

    Hello

    Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.

    As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.

    This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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" >

    {#wrapper}

    float: none;

    Width: 1500px;

    margin: auto;

    }

    {#p1}

    float: left;

    height: 350px;

    Width: 490px;

    margin left: 15px;

    top of the margin: 15px;

    background-image: url(images/testp1.jpg);

    }

    {#p4}

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    margin left: 15px;

    background-image: url(images/testp2.jpg);

    }

    {#p5}

    Clear: none;

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    margin left: 15px;

    background-image: url(images/testp3.jpg);

    }

    {#p6}

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    background-image: url(images/testp1.jpg);

    }

    {#p2}

    background-color: #333;

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    background-image: url(images/testp2.jpg);

    }

    {#p3}

    background-color: #999;

    float: left;

    height: 350px;

    Width: 490px;

    right margin: 15px;

    top of the margin: 15px;

    background-image: url(images/testp3.jpg);

    }

    {#p7}

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    margin left: 15px;

    background-image: url(images/testp3.jpg);

    }

    {#p8}

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    margin left: 15px;

    background-image: url(images/testp1.jpg);

    }

    {#p9}

    float: left;

    height: 350px;

    Width: 490px;

    top of the margin: 15px;

    background-image: url (images/Logo1 - Tile.jpg);

    }

    {#home-btn}

    background-color: #999;

    float: left;

    height: 30px;

    Width: 30px;

    margin-top:-715px;

    margin left: 15px;

    background-image: url(images/home.jpg);

    }

    {#contact-btn}

    float: left;

    height: 30px;

    Width: 30px;

    margin-top:-625px;

    margin left: 15px;

    background-color: #FF6;

    background-image: url(images/contact.jpg);

    }

    {body

    left margin: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    }

    {#info-btn}

    background-color: #09F;

    float: left;

    height: 30px;

    Width: 30px;

    margin left: 15px;

    margin-top:-670px;

    background-image: url(images/info.jpg);

    }

    < / style >

    < / head >

    < body >

    < div id = 'wrapper' >

    < div id = "p9" > < / div >

    < div id = "p8" > < / div >

    < div id = "p7" > < / div >

    < div id = 'p6' > < / div >

    < div id = "p5" > < / div >

    < div id = "p4" > < / div >

    < div id = 'p3' > < / div >

    < div id = "p2" > < / div >

    < div id = "p1" > < / div >

    < / div >

    < div id = "contact-btn" > < / div >

    < div id = "info-btn" > < / div >

    < div id = "Home-btn" > < / div >

    < / body >

    < / html >

    Any ideas?

    Cheers, Ryan

    I normally work in the design window that I've not been taught in the coding

    You will learn about code regardless if you make the effort. Start with these links:

    http://w3schools.com/

    http://www.csstutorial.NET/

    DW assumes that you have knowledge of HTML & CSS code.

    If you cannot or will not work with the code, you use the wrong tool.

    For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio

    Nancy O.

  • find the gaps between the sequences

    Hi all

    I have a request to find the gap between the sequences.

    Here's my table structure

    user_number | seq_number

    1            |   101

    1            |      102

    1            |    109

    1            |    110

    1            |    111

    2            |    201

    2            |    202

    2            |    203

    2            |    207

    2            |    208

    .            |    .

    .            |    .

    .            |    .

    .            |    .

    Now I have to find the gap between sequences, what I mean by gap's user_number 1 ' 6 between seq_number gap ' 102 'and 109'.

    Here's the query that I'm writing, but not giving the correct answer, he always gives the gap of 2:

    Select gap_start - gap_end gap

    de)

    Select a.seq_number + 1 as gap_start, b.seq_number - 1 as gap_end

    from my_table a, b from my_table

    where a.seq_number = b.seq_number

    and a.seq_number - (select c.seq_number

    from my_table c

    where c.seq_number = a.seq_number - 1) is set to null

    and a.user_number = '1'

    order of a.seq_number

    );

    Thank you.

    Hello

    Whenever you have a question, please post a small example of data (CREATE TABLE and only relevant columns, INSERT statements) for all of the tables involved and the accurate results you want from this data, so that people who want to help you can recreate the problem and test their ideas.

    Explain, using specific examples, how you get these results from these data.

    Always say what version of Oracle you are using (for example, 11.2.0.2.0).

    See the FAQ forum: Re: 2. How can I ask a question on the forums?

    Maybe you want something like this:

    WITH got_prev_seq_number AS

    (

    SELECT user_number, seq_number

    LAG (seq_numebr) OVER (PARTITION BY user_number

    ORDER BY seq_number

    ) AS prev_seq_number

    FROM my_table

    )

    SELECT user_number, seq_number, prev_seq_number

    OF got_prev_seq_number

    WHERE seq_number > prev_seq_number + 1

    ORDER BY user_number, seq_number

    ;

    .

  • Gap between the left and right columns. Both floated and checked the meansurements. Help!

    Gap between the left and right columns. Both floated and checked the meansurements. Help!

    Nancy - I think I might have fixed. I'll get back to you. Thank you very much for answering. Sometimes I feel so lonely there.

Maybe you are looking for