Problem IE padding/margins

Hi guys,.

Recently I create a Web site with a photo gallery of bearings disjointed to the swap image behavior attached to them and the legends that are absolutely positioned and enabled with show/hide behaviors.

I've seen the div that all of this is contained in a 20px padding and then given the div containing the image of the target that replaces a 10px margin-bottom so that there is room for captions to show.

This works fine in Firefox on Mac and PC, but when I tested it on Internet Explorer on a PC, low-margin seems to disappear from the div and the captions appear too low and in the wrong place.

Anyone know why this is and what I can do about it?

Thanks in advance.

Oli

In another thread, you said-

"For some reason any it displays strangely in Internet Explorer, even if she".
works
fine in Firefox and Safari and when I asked why, a Member here well
said
I shouldn't use Divs PA because they will always remain in the exact same
Place so if the viewer increases the police or something, everything else will be
move and this could be the problem. »

In my response, I told you why "it displays strangely in Internet Explorer" in
This paragraph-

> This approach is never going to work. Why? Because div #gallery_text
> expand vertically as the text is resized in the browser, pushing
> div #gallery_main down or dropping upward. This will
> make the space between the #gallery_main div and caption absolutely
> positioned containers (which are positioned absolutely and will not move)
> variable.

Do you not understand that? What happens is that the content of your text
above the enlarged image will change 'form' in different browser settings
(display text larger or smaller). When he changes shape, this block of text
Gets the bigger or shorter. As he flexes vertically like that, it grows
the image zoomed down, or he will shoot to the top of the page. Given that the absolutely
Legends placed ARE NOT AFFECTED BY THIS MOVEMENT, they remain exactly
where you place them and therefore are swallowed by the enlarged image
When increases the text size, or are left high-and-dry with a large gap above
When it contracts. That's why I say it will never work.

(To make it work, you must get rid of a) the absolute positioning and b)
show/hide behavior. Each caption would be in a stacked static div
vertically on the page. Each of them would have a CSS rule applied that
defines "display: none". Indeed it removed from the page, it is not
just HIDE them the same way as the style of visibility. Now - your thumbs
must have a property Change behavior applied to them to change the
style. Display setting for the associated static div related neither to block, and
for the rest the legend of divs to block votes to zero. Bingo - your div
appears on the page, but none of the others don't.

See if you can try this - it will work.

--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
==================

"Murray * AS *" wrote in message
News:gp5lvd$QBO$1@forums. Macromedia.com...
> This approach is never going to work. Why? Because div #gallery_text
> expand vertically as the text is resized in the browser, pushing
> div #gallery_main down or dropping upward. This will
> make the space between the #gallery_main div and caption absolutely
> positioned containers (which are positioned absolutely and will not move)
> variable.
>
> The solution is not to use absolute positioning for the legends. Judging
> the rest of the tag of the page, this should be in your
> capacity to do it, no?
>
> --
> Murray - ICQ 71997575
> Adobe Community Expert
> (If you * MUST * write me, don't don't LAUGH when you do!)
> ==================

> http://www.projectseven.com/go - DW FAQs, tutorials & resources
> http://www.dwfaq.com - DW FAQs, tutorials & resources
> ==================
>
>
> "olicorse" wrote in message
> news:[email protected]...
> Hi,.
>>
> Yes sorry on this point - which would probably have been useful!
>>

> http://www.olicorse.com/portfolio/graphics/logos/logos.html
>>
> As I said, it works fine in Firefox... just IE is proving to be a
> problem.
>>
> Cheers
>>
>

Tags: Dreamweaver

Similar Questions

  • Need help to solve the problem with the margin at the bottom of the converted pdf file.

    Need help to solve the problem with the margin of the converted CEO down. What caused the change in format?

    Hi jerrio1949,

    There is no way to change the margin, you settle back into your original file & then convert to PDF format.

    Kind regards
    Nicos

  • 'Click to edit all the properties' does not not in Dreamweaver CC for padding/margins

    Whenever I try to use the option "Click to change all the properties" in Dreamweaver CM³ (the link icon of string in the middle of the box of Magin/Padding), it never seems to work. Or should I use the abbreviation CSS, it lists, up, down, left and right margins/padding separately no matter if I have the chain linked or broken link icon.  If I set it up to connect the four sides, and enter a value in the top, nothing happens on the other sides. It's not until I enter a value towards the bottom it auto fills in the other two sides. Anyone else having this problem?

    I am unable to reproduce the problem where the link in the chain does not update the 4 values all. This works well for me.

    As for the formula of stenography, there's a preference setting that is probably unchecked?

    Go to Dreamweaver-> preferences on a Mac or Edition-> Preferences Windows and go to the section of CSS Styles. If the check box for margin and padding is defined, then you will get a code shortcut otherwise it will not.

    HTH,

    Nithya

  • attatching problems I Pad for PC - gives a STOP 0x7E

    Every time I try to join my I pad (IOS5) to my PC windows XP service pack 3, the pc crashes and I get a blue screen with the message: OXOOOOOO7E (OXOOOOOOOO, OXBA5077C8, OXCOOOOOO5, OXBA5074C4) of welcome advice. I need to connect to the PC to make music from Itunes I get also some photos. Hope someone can help me. Once I restart the PC, it works perfectly normally, the I Pad also works OK on its own.

    Finally, I found the problem. Logitech, it seems that Logitech drivers/software can conflict with the iPad 2 when you try to connect to Itunes via a PC. I uninstalled all the stuff of Logitech, webcam, mouse, microphone, then connected Ipad to PC success. all is well in my world of Ipad. That said, if I knew the scam this means you have to go through Itunes for download on and Ipad I would have bought a laptop.

  • Printer problem on Windows 'margins are too small.

    Original title: I'll "ask" as I don't know where to find "answers":

    I am sure that the isI will "ask" that I don't know where to find "answers": when I compose using Word, something to copy and paste it on a blank page or click here to print I get a message that my margins are too small - I really want ot print.  I always click Yes, but the document goes into a queue.  When I explore a reason for the 'unprintable', it's always "a document in the queue has hampered the printing process.  I have delete or cancel the docs one both attempt to determine the doc at fault, but I can never start the printing process.  CAN SOMEONE HELP ME SOON? a simple question for most people, but not for me.   I'll be very grateful for a fix.

    Hi Gunnar,

    1. is the issue limited only when printing word documents access?

    2. what happens when you try to print a test page?

    I suggest you to change the margin of Word and check if it helps.

    Change page margins

    If you are unable to print from any document, try the following methods and check if it helps.

    Method 1:

    Run the printer Troubleshooter and check if that helps.

    Open the printer Troubleshooter: http://windows.microsoft.com/en-US/windows7/Open-the-Printer-troubleshooter

    Method 2:

     

    Restart the print spooler device

    a. click Start, select Control Paneland then click on Administrative Tools.

    b. double-click on Services.

    c. in the user account control window, click on continue.

    d. click on print spooler.

    e. click stop to stop the print spooler.

    f. click Start to restart the print spooler.

    g. click on OK.

    h. restart the computer and check if it helps.

    Method 3:

    Clear the printer files.

    a. click on Start Menu, in the online search, type services.msc and press ENTER. b. the Services listed, stop the print spooler service. (c) in Windows Explorer, navigate to the folder below and open the PRINTERS. C:\Windows\system32\spool\PRINTERS d.     Click on continue or Yes (if prompted by UAC) to approve the opening of the PRINTERS folder. e. remove all files in the PRINTERS folder, until it is empty, and then close Windows Explorer. Note: DO NOT DELETE the PRINTERS folder itself. Don't delete its content. f. open Services, and then start the print spooler service.

    Refer to the steps in the following Microsoft article:

    Printer in Windows problems: http://Windows.Microsoft.com/en-us/Windows/help/printer-problems-in-Windows 

    Keep us informed on the status of the issue.

  • Problem WORD PAD under Windows 7. A screen undeletable app crashes me to access my saved documents and may not be x'd out.

    When I opened Word Pad (successfully) in Windows 7, a problem blocking me to access my saved documents previously.  Rather than open the document saved as I click (to open saved documents) in the list of documents in the "document library", has downplayed the app screen appears on the window of the library of Documents and this application cannot be deleted because by clicking x on the top right does nothing.
    Using Safe Mode clumsily make you a previously saved in Word Pad document more. But it is not populate the list in the list of recent Documents in Word Pad. And in Safe Mode, it is displayed in a broken (and difficult to use) manner.
    Word Starter villainous blocking app appears as an opening window reduced titled Microsoft Word Starter 2010 (whatever it is), who appears on the document library list window and cannot be deleted.  When I try to x this unwanted App (top right of the application) to raise and close (because he keeps me to access my saved documents) nothing happens.  The x (close) or dash (minimize (-) button (upper-right corner of the app minimized window) do anything.)  If I can't access any of my saved Word Pad documents.  But I peut begin a new document again using the fresh blank document that appears when I open Word Pad, or open a new empty menu, which means Word Pad works fine.
    So I tried to solve the problem in uninstallation of Microsoft Office (which I don't use) it would uninstall the unwanted Word Starter 2010 application.  However, the problem still exists, and the unwanted app reappears every time I try to open my documents previously stored in the document library list.  And when I tried to search my computer for this unwanted Microsoft Word 2010 application to delete, I couldn't find any trace of it, anywhere.  There must be a hidden application.
    Not only that, but when I open freshly Word Pad - a list of recent Documents (in the menu option extreme top left (that I had used to open with) is inexplicably empty, but it will display all of my saved documents previously (on the right side).    Another method, that I've used to access documents in Word Pad was to click on my icon in taskbar (where I pinned the little icon to access Word Pad), but the list of my previous documents is therefore more in the field of small options which is the opposite, I used to be able to access my Word Pad documents recorded directly. The list is gone.
    So when I click on one of the documents stored in the document library list, that he does not attend the Word Pad at all, but rather, the unwanted app appears in front of the document library, list of blocking and cannot be deleted.  Only when I go out the document library he disappears with the window of the document library itself.
    Can you please tell me how I can remove the screen yellow reduced app unwanted (Word Starter 2010) to block my access to one of my Word Pad documents.  Right now, Safe Mode is the only way to access the Word Pad documents, and it's a way uncomfortable to do.
    I just want to make Microsoft Word Starter 2010 stop appearing when I don't need too and make it capable of being x'd out of the screen.

    This shows the manual method to uninstall Office

    http://support.Microsoft.com/kb/290301

    The two links below show the methods of uninstalling Office Starter or click to run applications

    http://h10025.www1.HP.com/ewfrf/wc/document?CC=UK&LC=en&DLC=en&docName=c02981221#N272

    http://Office.Microsoft.com/en-us/Starter-Help/Update-repair-or-uninstall-Office-click-to-run-products-HA010382089.aspx

  • Padding/margin question

    I wish that my header and footer bumping against the NAV of sidebar. How can I do this? I played a bit with the padding and margins, but nothing seems to work?

    file:///users/Greg/Studio%201482/jobs/%23130%20Orthopedic%20Assoc/MICROSITE/index.html

    Thank you!

    It's a good idea to work with valid code before tweaking the final look of a site with different browsers. Fortunately, these are easy. You cannot have spaces in names or ID use for example, id = "About_btn" instead of id = "in respect of btn". (Similarly for names)

    Then, get rid of the

    in the div. sidebar1″

    Move
    outside of the

    tag in your paragraph of Lorem ipsum.

    Download


    We'll see how it does.

    --
    Mark A. Boyd
    Keep-on-Learnine :-)
    This message was processed and published by Jive.
    It will not be considered an accurate representation of my words.
    She may not even have been designed as a response to your message.

  • Problems with the margins of the document...

    Hello

    I want to change the margins of my document that I'm working on. I clicked on layout-> margins & columns and the change was successful, but I don't see the margins... Why is this? I want to be able to see and if possible also be able to align with them because in my document, there are several A4 pages with just 1 image that will have a white boarder 10 mm around her and I don't want to measure each image...

    Color Wajt is thabackground around the page? If it is gray instead of white, you are in preview mode and you must switch to normal layout mode. If you are already in normal mode, you probably hid guides, and you can show them again on the view menu.

  • painful margins left/padding

    I'll be darn if I can understand why I have these problems of left margin.

    One is in my sidebar div, and that should be obvious:

    < div id = "sidebar" > we have a wide range of houses to bounce

    < / div > <! - ends sidebar - >

    I would like him to have the same left margin as the div above it (not in the HTML code but in Visual page on a desktop computer): < div id = "bouncer" >

    I've been playing with the CSS and cannot move the div to the left.

    In addition, I have a four-column page footer area. The text, it is too far left, as well:

    < div class = "colonne-quatrieme" >

    < div class = "content of the column" >

    < ul >

    Bristol < /li > < li > Bounce House rentals

    Forestville < /li > < li > Bounce House rentals

    Plainville < /li > < li > Bounce House rentals

    Newington < /li > < li > Bounce House rentals

    West Hartford < /li > < li > Bounce House rentals

    East Berlin < /li > < li > Bounce house rentals

    < /ul >

    < / div >

    < / div >

    And I looked at the lists and lists bulleted, all in the style of the leaf and cannot, for the life of me, know the dash.

    Can I get a second pair of eyes?

    The web page is here:

    http://bouncezonect.com/bouncezone.html

    Is the style sheet to http://bouncezonect.com/CSS/main.CSS

    In the HTML code, I don't want to set the bar just below the content div, because on the phones, I want it to appear under this div.

    Thank you!

    -Mark

    Footer:

    UL {margin: 0; padding: 0}

    #sidebar {float: left}

    Nancy O.

  • problem of margin table banner (HTML portlet) attached to a portal area

    Hello

    I try to make a header banner using a region that is filled by a Portlet of HTML (code below). The problem is that the banner has a margin, at the border of the region as well as the currently displayed page. I would like a banner that completely fill the space provided without any padding/margin/extra browser space. When I test the code below as a standalone HTML, it works. But when I paste it into the HTML portlet attached in a region (region provided by a portal template model no HTML) the space/padding appears. Please help remove this fill. Thanx.
    Jeffry

    ====

    < style type = "text/css" >
    {#middlebanner}
    background: #ffffff url(./Heading-middle.jpg) horizontal;
    }
    {body
    margin: 0px;
    padding: 0px;
    }
    < / style >

    < table border = "0" cellspacing = "0" cellpadding = "0" width = "100%" >
    < b >
    < td >
    "< img src="./Heading-left.gif ">
    < table >
    < td id = "middlebanner" width = "100%" >
    < table >
    < td >
    "< img src="./Heading-right.gif ">
    < table >
    < /tr >
    < /table >

    You can use the editing page properties to control some of these elements.
    Please go to navigator, to find your page, to edit, and then in the graphic representation of the edition, just above any region you would see a set of icons allows to add a portlet, or define more, regions etc. right there, one of the links is to edit the properties of the region. Click on it and follow the options that would be out of there. You should get a better control over your pages.

    Thank you!
    AMN

  • Page margin

    Hello

    I've been designing my first page ever and I'm having a problem with page margin.

    Mainly the margin of page is different on my pages, but in Page Properties I use the same settings for each of the sites.

    On my main page and the page I use these settings:

    height: 100px

    margin-bottom: 0px

    margin left auto

    right margin auto

    margin-top 0px

    Max-width 960px

    padding 0px

    width 960px

    If you go to my page www.itconnect.co.nz you can see a difference in low-margin between main and on the page.

    What should do?

    Best regards

    Lukas

    I don't see that a problem in Internet Explorer, which I think is caused by the scroll bar appearing on the longer pages and endangered on shorter pages.

    Try fixing ' Page Shift ' problem - CSS Tutorials - hasLayout.net-by Zoffix Znet

  • Unwanted padding around the text

    I've just started creating web pages, and I seem to be stuck with a problem of unwanted padding around my text.

    Click HERE to see the example.

    I've colored the text boxes so that it's easy to see what is happening.  Reviews for the grey area, where you can read "Aniversarios, Celebraciones y Bienvenidas" text to push the box down (it's supposed to be flushed at the top with the other boxes.  There are also of no matter where I put the text.

    I have no idea how to solve this problem.  Has anyone ever experienced this before?

    H1 tags have a default padding and/or margin given to them by the browser. You should be able to remedy this by removing any padding/margin of the h1 around your text tag in your css...

    H1 {}

    padding: 0;

    margin: 0;

    }

    If you want to use h1 tags in other places on your site and want to keep the margin/padding, you can use...

    #center - top h1 {}

    padding: 0;

    margin: 0;

    }

  • Sidebar has even when padding padding set to 0

    Hi, I hope you can help me with a problem I have create my site:

    I created a two-column Web page using a Dreamweaver template, with a sidebar and main content to create two columns.

    He looks at just how I want it, except that, in the sidebar (which is wedged right) < p > text or header, does not start on the left edge of the Sidebar container. It is as if he is padding the text when I put the padding 0.

    Please could someone help me work on what I did wrong? Here's the source code, with CSS below:

    < ! 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 > < /title > home page

    <! - TemplateEndEditable - >

    "" < link href = "... / _css/main.css ' rel ="stylesheet"type =" text/css"/ > <!-[if IE] >

    < style type = "text/css" >

    / * place patches css for all versions of Internet Explorer in this conditional comment * /.

    .twoColElsLtHdr #sidebar1 {padding-top: 30px ;}}

    .twoColElsLtHdr #mainContent {zoom: 1; padding-top: 15px ;}}

    / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.

    < / style >

    <! [endif]-->

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

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

    <!-TemplateBeginEditable name = "head"->

    <! - TemplateEndEditable - >

    < / head >

    < body class = "twoColElsLtHdr" >

    < div id = "container" >

    < div id = "header" >

    "" < h1 > < img src = "... / pictures/Fifth Banner.png" width = "736" height = "100" border = "0" well = "#Original1" id = "Word of Dialogue" alt = "Word of Dialogue" / > < / h1 >

    < h1 >

    < name of map = "Original1" id = "Original1" >

    "" < area shape = "rect" coords = "7,6,727,92" href = "... / index.html" target = "_self" alt = "Home" / >

    < / map >

    < / h1 >

    < div id = "myMenu" >

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

    <!-TemplateBeginEditable name = "Modifiable Spry"->

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

    "< li > < a href ="... / about.html "> on < /a > < /li >"

    "< li > < a href ="... / writingeditingservices.html "> Writing & Editing < /a > < /li >"

    "< li > < a href ="... / projectmanagement.html "> management < /a > < /li >"

    "< li > < a href ="... / policyadvice.html "> < /a > < /li > strategic advice"

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

    "< li > < a href ="... / contact.html "> Contact < /a > < /li >"

    <! - TemplateEndEditable - >

    < /ul >

    < br / >

    <!-end #myMenu--> < / div >

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

    < div id = 'sidebar2' > <!-TemplateBeginEditable name = 'Sidebar2'->

    < p > write your second column here. < /p >

    <! - TemplateEndEditable - >

    <!-end #sidebar2-> < / div >

    < div id = "mainContent" > <!-TemplateBeginEditable name = '2nd hand model'->

    Main content of < h1 > < / h1 >

    < p > write your main content here. < /p >

    <! - TemplateEndEditable - >

    <!-end #mainContent--> < / div >

    <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

    < div id = "footer" >

    < p > copyright & copy; "' Dialogue 2011 Word < img src ="... / pictures/WtD small Logo II.png "alt ="JMT"width ="78"height ="30"/ > < / p >

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

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

    < script type = "text/javascript" >

    <!--

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

    ->

    < /script >

    < / body >

    < / html >

    CSS as follows:

    @charset "UTF-8";

    {body

    fonts: 100% Arial, without serif.

    background: #CCCCCC;

    margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

    padding: 0 0 0 0;

    text-align: left; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

    color: #535353;

    margin left: 10%;

    right margin: 10%;

    width: 80%;

    are-family: Arial, without serif.

    margin-bottom: 0px;

    padding-bottom: 0px;

    }

    / * Tips for Elastic layouts

    1. Since the elastic layouts overall size is based on the user's default font size, they are more unpredictable. Used correctly, they are also more accessible for those who need larger fonts given the length of the line remains proportionate.

    2. sizing of the divs in this provision are based on 100% font size in the body element. If you decrease the overall size of the text by using a font size: 80% on the body element or the #container, remember that the complete provision will reduce proportionally. You can increase the widths of the divs to compensate for this.

    3. If the sizing of fonts is changed in different quantities on each div instead of on the overall design (ie: #sidebar1 is a font size of 70% and #mainContent has a font size of 85%), this will change proportionally each of the overall size of divs. You can adjust the base on your final sizing of fonts.

    */

    .twoColElsLtHdr #container {}

    width: 62em;  / * This width will create a container that can fit in a 800px browser window if text is left to default browser font sizes * /.

    background: #FFFFFF;

    margin: 0 auto; / * margins (in conjunction with a width) auto Center the page * /.

    border: none;

    text-align: right; / * This setting overrides the text-align: center on the body element. */

    }

    .twoColElsLtHdr #header {}

    background: #FFFFFF;

    padding: 0 0 0 0;  / * This filling is the alignment to the left of the items in the div that appear below. If an image is used in the #header instead of text, you can remove the padding. */

    text-align: center;

    are-family: Arial, without serif.

    }

    .twoColElsLtHdr #header h1 {}

    margin: 0; / * zero setting of the margin of the last element in the #header div tag will prevent the collapse of margin - inexplicable space between divs. If the div has a border around it, this isn't necessary, which also allows to avoid the collapse of margin * /.

    padding: 20px 20px 10px 30px; / * padding instead of margin will allow you to keep the edges of the div element * /.

    text-align: left;

    are-size: 200%;

    are-family: Arial, without serif.

    margin-top: 0px;

    margin-bottom: 0px;

    }

    / * Sidebar1″ tips:

    1 be aware that if you set a value for the font size on this div, the width of the div will be adjusted accordingly.

    2. as we work in ems, it is preferable not to use the filling in the sidebar itself. It will be added to the width for browsers compatible standards creating a real unknown width.

    3. the space between the wall of the div and the items it contains can be created by placing a margin left and right on these items as seen in the rule ".twoColElsLtHdr #sidebar1 p.

    */

    {.twoColElsLtHdr #sidebar1}

    float: right;

    width: 25em; / * because this element is floating, it takes a width * /.

    background: #FFFFFF; / * the background color will be displayed for the length of the content of the column, but no further * /.

    padding: 0 0 10px 10px; / * upper and lower padding create a Visual space within this div * /.

    are-family: Arial, without serif.

    border: thin solid #999999;

    margin: 0 10px 20px 10px;

    }

    .twoColElsLtHdr #sidebar1 h3 {}

    margin-left: 10px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.

    right margin: 20px;

    text-align: left;

    are-family: Arial, without serif.

    are-size: 200%;

    top of the margin: 5px;

    }

    .twoColElsLtHdr #sidebar1 p {}

    margin-left: 10px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.

    right margin: 20px;

    text-align: left;

    are-size: 100%;

    are-family: Arial, without serif.

    margin-bottom: 5px;

    top of the margin: 5px;

    }

    {.twoColElsLtHdr #sidebar2}

    float: right;

    width: 340px; / * because this element is floating, it takes a width * /.

    background: #FFFFFF; / * the background color will be displayed for the length of the content of the column, but no further * /.

    padding: 0; / * upper and lower padding create a Visual space within this div * /.

    are-family: Arial, without serif.

    margin: 20px;

    }

    .twoColElsLtHdr #sidebar2 h3 {}

    margin-left: 10px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.

    right margin: 20px;

    text-align: left;

    are-family: Arial, without serif.

    are-size: 200%;

    top of the margin: 5px;

    padding: 0;

    }

    .twoColElsLtHdr #sidebar2 p {}

    margin-left: 10px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.

    right margin: 20px;

    text-align: left;

    are-size: 100%;

    are-family: Arial, without serif.

    margin-bottom: 5px;

    top of the margin: 5px;

    padding: 0;

    }

    .twoColElsLtHdr #sidebar2 ul li {}

    are-family: Arial, without serif.

    are-size: 100%;

    make-style: normal;

    padding-right: 10px;

    padding-left: 0px;

    margin-left: 10px;

    text-align: left;

    right margin: 20px;

    }

    / * MainContent tips:

    1. If you give this div #mainContent a value of different size of the div # sidebar1″, the margins of the #mainContent div will be based on the font size and the width of the div #sidebar1 depend on the size of the font. You can adjust the values of these divs.

    2. the space between the mainContent and sidebar1″ is created with the left on the mainContent div margin regardless of how content div the sidebar1″ contains, the space of the columns will remain. You can remove the left margin if you want the #mainContent div text to fill the space of #sidebar1 when the content of #sidebar1 is complete.

    3. to avoid falling of float, you may have to test to determine the size of the image/approximate maximum element because this provision is based on the calibration of fonts the user combined with the values that you set. However, if the user has their browser game lower than normal font size, less space will be available in the #mainContent div that you see on the test.

    4. in the Internet Explorer conditional comment below, the zoom property is used to give the mainContent "hasLayout". This avoids several specific IE bugs that may occur.

    */

    {.twoColElsLtHdr #mainContent

    text-align: left;

    margin-top: 0;

    margin right: 400px;

    margin-bottom: 10px;

    margin-left: 20px;

    are-family: Arial, without serif.

    }

    .twoColElsLtHdr #mainContent h1 {}

    padding: 0;

    margin-left: 0px;

    margin-right: 0px;

    text-align: left;

    are-family: Arial, without serif.

    }

    .twoColElsLtHdr #mainContent h2 {}

    margin-left: 0px;

    margin-right: 10px;

    text-align: left;

    are-family: Arial, without serif.

    are-size: 150%;

    }

    .twoColElsLtHdr #mainContent p {}

    margin-right: 10px;

    text-align: left;

    are-size: 100%;

    are-family: Arial, without serif.

    }

    .twoColElsLtHdr #footer {}

    padding: 0 10px 0 0; / * This filling is the alignment to the left of the items in the div that appear above him. */

    background: #7F7F7F;

    margin-bottom: 0;

    }

    .twoColElsLtHdr #footer p {}

    margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.

    padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.

    text-align: right;

    are-size: 85%;

    are-family: Arial, without serif.

    color: #FFF;

    }

    / * Various classes for reuse * /.

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

    margin left: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page to the left * /}

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}

    clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    .oneColElsCtrHdr #container #footer p {}

    are-family: Arial, without serif.

    are-size: 85%;

    margin: 0;

    padding: 10px 0;

    text-align: right;

    }

    .twoColElsLtHdr #container #mainContent ul li {}

    are-family: Arial, without serif.

    }

    .twoColElsLtHdr #container #mainContent #address p {}

    are-family: Arial, without serif.

    are-size: 100%;

    margin: 0;

    padding: 0 0;

    text-align: left;

    margin left: 7th;

    }

    {.twoColElsLtHdr #rhbox}

    float: right;

    width: 19em;

    margin-left: 20px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.

    margin-right: 0px;

    text-align: left;

    are-size: 100%;

    are-family: Arial, without serif.

    margin-bottom: 10px;

    top of the margin: 5px;

    background-color: #83B02B;

    padding-top: 10px;

    padding-bottom: 10px;

    color: #FFF;

    border-style: none;

    }

    a: link {color: #DB5924; text-decoration: underline ;}}

    a: active {color: #83B02B; text-decoration: underline ;}}

    a: visited {color: #83B02B; text-decoration: underline ;}}

    a: hover {color: #83B02B; text-decoration: underline ;}}

    .twoColElsLtHdr #container #mainContent #rhbox ul li {}

    are-family: Arial, without serif.

    are-size: 100%;

    make-style: normal;

    padding-right: 10px;

    padding-left: 0px;

    margin-left: 30px;

    }

    .twoColElsLtHdr #container #mainContent #rhbox h1 {}

    are-family: Arial, without serif.

    are-size: 120%;

    make-style: normal;

    padding-right: 10px;

    padding-left: 10px;

    margin-left: 30px;

    }

    .twoColElsLtHdr #container #mainContent #rhbox h2 {}

    are-family: Arial, without serif.

    are-size: 120%;

    make-style: normal;

    padding-right: 10px;

    padding-left: 10px;

    line-height: 0.5;

    }

    .twoColElsLtHdr #container #mainContent #rhbox p {}

    are-family: Arial, without serif.

    are-size: 120%;

    make-style: normal;

    padding-right: 10px;

    padding-left: 20px;

    line-height: 0.5;

    }

    .twoColElsLtHdr #header #mainContent ul {}

    are-family: Arial, without serif.

    are-size: 100%;

    }

    It is caused by margins in your text #sidebar2 styles:

    .twoColElsLtHdr #sidebar2 h3 {}
    margin-left: 10px; / * remove this * /.
    right margin: 20px; * remove it * /.
    text-align: left;
    do-family: Arial, without serif.
    do-size: 200%;
    top of the margin: 5px; / * remove this * /.
    padding: 0;
    }
    .twoColElsLtHdr #sidebar2 p {}
        margin-left: 10px;  / * remove this * /.
    right margin: 20px;  / * remove this * /.
    text-align: left;
    do-size: 100%;
    do-family: Arial, without serif.
    margin-bottom: 5px; / * remove this * /.
    top of the margin: 5px; / * remove this * /.
    padding: 0;
    }
    .twoColElsLtHdr #sidebar2 ul li {}
    do-family: Arial, without serif.
    do-size: 100%;
    make-style: normal;
    padding-right: 10px; / * remove this * /.
    padding-left: 0px;
    margin-left: 10px; / * remove this * /.
    text-align: left;
    right margin: 20px; / * remove this * /.
    }

    FYI: The lists are indented with default browser margins & padding.  If you want to remove these default settings, you must zero padding & margins.

    #sidebar2 ul li {}

    padding: 0;

    margin: 0;

    }

    Review the CSS box model:

    http://www.w3schools.com/CSS/css_boxmodel.asp

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Layout problem: banner and the main non-aligned text (help a dufus please)

    Hi folks, I'm pulling my hair out here (which is not a good thing because I said that it becomes thin anyway)

    I'm a noobie Dreamweaver and I followed the check_magazine online tutorial. Was not serious, but when I went to my own page, I had problems. All I want is a fixed banner and navigation panel, and immediately below I want a main text, which will have a length of variable scroll according to content. When I'm in design mode it seems OK here:

    Bert Layout Prob.jpg

    But as soon as I click direct, the body of the text disappears under the banner. I can't say where I've gone wrong. Here is a link to my page:

    http://www.student.city.AC.UK/~abhm364/P1/index2.html

    Css is as follows:

    @charset "utf-8";
    / * CSS document * /.

    #container {}
    background-color: B2D7E7;
    height: auto;
    Width: 1280px;
    left: 0px;
    Top: 0px;
    }
    #banner {}
    position: fixed;
    height: 180px;
    Width: 1280px;
    left: 0px;
    Top: 0px;
    background-image: url (features);
    }
    {#main_text}
    do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: medium;
    background-color: #B2D7E7;
    Width: 1280px;
    height: auto;
    top: 181px;
    }

    The banner is 1280 x 180 and I want the main text to start immediately 181 verses down to the car. I'm having the same color as the background of the banner in the background of the main text is flawless. At the end, I'll put a spry menu bar in the lower part of the banner.

    Is someone can you please tell me where I've been a dufus? I'm sure I could, but cannot determine where, I know just that it no worky!

    You might be thinking why you use "position: fixed" and adding a top and left value?

    Try to remove the pieces of your CSS.

    You may also like to think of this rule:

    * {  margin: 0;  padding: 0;}
    
    
    

    Google "padding margin reset" or "CSS reset" for more on this last suggestion.

    Martin

  • Addition of &lt; A HREF or image map image is 3px padding on image L/R

    Hi all -

    I have an interesting problem.  I am designing a web page that has a navigation banner (home - programs - calendar of events - contact us - download page) which consists of a .png for each page (e.g., home.png, programs.png, etc.).  My page is 1000px wide and all the images in the banner of the navigation add up to 1000px wide.

    I use JavaScript to create an effect onMouseOver and onMouseOut on each of the images. The problem I encounter occurs when I tried to add a link (either by < A HREF = or using an image map).  Whenever I have add a link to the image, a box of small (3px) white space appears to the right of the image. That all my other images 3px moves to the right (and other 3 for each link, I add to the subsequent images) which makes the total width of the banner of browsing 1000px and the last image gets pushed to a new line.

    I can't find any way to get rid of this white space other than to remove the link of the image.  There is no property on the page that adds any kind of padding, margins, borders, images or links, so I don't see a property that must be changed.

    Help! How can I get rid of that white space, but always keep the link on the image?

    [I have attached a screenshot showing a before/after images without/with links]

    Thanks in advance!

    KL

    If you want help with your code you had better show to us. (HTML & CSS)

    You have reset on your borders image, margins, and padding?

Maybe you are looking for