IE defining the additional margin at the top and bottom of page using CSS

Hello

I am struggling with getting a site to look right in Internet Explorer.

I wonder if anyone knows the answer or has some ideas to help me solve the problem...

I use the headers and footers on a background image (with repeat-y on the style sheet) to give me a picture frame effect. You can see what it's supposed to look like below, using Firefox, Opera or Netscape browsers.

http://www.sueharrington.co.UK/layout_tmpl_test.htm

However, in Internet Explorer, I get two problems.

1. the extra space at the top and in bottom of header and footer gifs.
2 bar (middle of the page) seems to have space for additional margin in IE, causing it to wrap around.

I managed to product another site where he works, but cannot see what is different about this one.

http://www.enscott.co.uk/indexb.htm - work in IE and Firefox

Someone at - it had indications or experienced this problem?

Thanks in advance

Neil

(I use a Dreamweaver template to generate the pages, but cannot see this difference make?)

It solved! - Or at least got a job.

This came from the discovery of EI mismanages the following values

margin-bottom
height

Basically low-margin or abbreviations seem to be ignored on the labels of stylesheet id (#). To test this, compare the following on IE and another browser (Firefox, for example)

To see this, write this stylesheet

{body
background-color: #FFFF00;
margin: 0;
}

{#wrapper}
background-color: #FF0000;
Auto margin: 100px;
height: 1000px;
Width: 770px;

for this html code





Display in IE and Firefox (or another browser)

Firefox poster correctly a red box on a yellow page with 100px margin top and bottom - that is to say however has a zero at the bottom.

Then apply the 100px high and the bottom margin to the "body" as below, leaving unchanged #wrapper.

{body
background-color: #FFFF00;
Auto margin: 100px;
}

Firefox is unchanged: he seems to ignore the margin-top on the body.

IE now shows a box with a tope 200px margin and a lower margin of 100px.

The other interesting thing appeared with the parameter "size".

If you insert a header or a footer background URL in a stylesheet, Firefow requires that you leave space for your background, or it does not show.

So for a 16px high gif, use the following text in the style sheet. (It used to a gif in footer)

#footer {}
background-image: url (.. / images/bg_bottom.gif);
background-repeat: repeat no.;
height: 16px;
Clear: both;
}

IE requires the value of 'height', but it is not guaranteed. (Even 1px or 1%) - if it is present, it works.

Unfortunately, this does not solve my pixels very little space, but made me think - if the margin is not properly handled on the tags "#", if I do the

the same color as the outside of the screen, it will not appear. This is easily done by using the following

background-color: #999999;

If my final CSS stylesheet looks like this

/ * to position the image in the browser * /.

{body
background-color: #999999;
margin: 10px 0;
padding: 0;
}

(/ * to contain and center of the page and product image sides) * /.

{#wrapper}
Width: 810px;
Auto margin: 0;
background-image: url (.. / images/bg.gif);
background-repeat: repeat-y;
}

/ * to keep the photo album frame * /.

#banner {}
height: 15px;
background-image: url (.. / images/bg_top.gif);
background-repeat: no-repeat;
}

/ * to keep the background image * /.

#footer {}
background-image: url (.. / images/bg_bottom.gif);
background-repeat: repeat no.;
height: 16px;
background-color: #999999;
Clear: both;
}

With the html as follows







content of the page here






This gives the desired frame "image". Still not 100% sure why the problem of initiall which happened, but this seems to fix.

The final page can be seen at

http://www.sueharrington.co.UK/layout_tmpl_demo.htm

Thanks for your help.

See you soon

Neil

Tags: Dreamweaver

Similar Questions

  • Portrait mode, how to drag a program window to the top and bottom of a window and have it snap.

    Maybe it's more of a feature request: Windows 7 has a component feature snap where you drag a window of program on the side of the screen and it will maximize this measure only half of the screen.  I love this feature and use it often to keep my office in order.  I recently turned to another monitor that I keep in Portrait mode, but the nod to works only on the sides.  Good if I had a big enough screen, but I really want to align with the top and bottom of the screen.  Please advise, thank you.

    Interesting idea! To get to the right people at Microsoft, please click thegive us your comments. Help improve Windows 7 link under ads at the top of the main page of the forum, or go to the page give us your comments for Windows 7 . Boulder computer Maven
    Most Microsoft Valuable Professional

  • Remove the big black bar at the top and bottom of Office

    original title: my desktop image now has a big black bar at the top and bottom. How can I get rid of this?

    The image filled my monitor yesterday. Today, I have a big black bar at the top and bottom. How can I get rid of this?

    1. Right-click on your desktop, choose Customize.
    2. At the bottom, click background.
    3. Finally, click on the Position of the image and choose Stretch or complete, what you prefer.
    4. Click on save changes.
    If this isn't the cause, you could also do that you use the full resolution of your monitor.
    1. Right-click on your desktop, choose the resolution of the screen.
    2. Make sure that you use the recommended resolution.
  • How to crop without black at the top and bottom

    Hello

    I try to crop a video. I go to Effects > video effects > transform > crop and under the effects of the controls, I put 20.0% on top and 12% on the bottom because that's how I want the cropped video. When I export the video it is always black on the top and bottom. How crop and export this video without that there is black at the top and bottom (and also to reduce the height of the video, take a part from the top and down)? Thank you!

  • I try Ben numbers several pdfs at the same time.  Once I did this, I'll and look and from the second page, the Ben numbers appear at the top and bottom.  I want only the bates numbers to appear at the bottom.  How can this be a gift

    I try Ben numbers several PDFs at the same time.  Once I have a result, from the second page, the Ben numbers appear at the top and bottom.  I want only the bates numbers to appear at the bottom.  How is that possible?

    Hey Bethany,.

    Please try again to implement numbering following the steps in article Acrobat bates help | Add headers and footers Bates numbering in PDF format

    Make sure that you apply for Bates numbering in the foot of page, as shown in the screenshot below.

    Kind regards

    Nicos

  • Photosmart 6510: lines horizontal and top and bottom of page when scanning

    Hello

    Scans of the bucket of my Photosmart HP 6510 leave a horizontal line at the top and bottom of the page.

    I tried to adjust every page that I scan to align as straight as possible on the glass and this sometimes helps a bit.

    I am able to bypass the lines in culture to, but would prefer to find a real solution.

    Any help would be appreciated because I don't know a lot about the scanners, thanks!

    I've included a sample page below (the mark on the right side is not dirty glass, it has been a staple in the page):

    Welcome to the HP community @lgilb01,

    I wanted to tender hand to respond to your message on the lines that you notice when you scan to scan in your Photosmart 6510 bed. It seems to me that there could be some light enter when performing the analysis, causing lines. If you are only scanning one page at a time, the lines should not appear as they are now.

    Here is a troubleshooting guide for you to try. If the lines do not fade, contact HP directly to see about a replacement printer.

    HP Photosmart 5510, 6510 and 7510 e - all-in - One Printer Series - vertical stripes, lines or scratches in Copies or scans

    Tip: Make sure that the printer is plugged directly into the wall, avoiding bars power and surge protectors. This ensures that the printer is full on.

    Testify of my answer by pressing the thumb in the air below and hit the "accept as Solution" button, if I have you helped a resolution!

    I hope I helped!

    Contact HP:

    Step 1. Open the link: www.hp.com/contacthp/
    Step 2. Enter the product number or select Auto detection
    Step 3. Scroll up to "still need help? Fill out the form to select your contact options.
    Step 4. Scroll down and click on: contact HP options - click Get phone number
    File number and phone number are displayed.

  • Using the PNG format with maximum width without clipping the top and bottom of the image?

    I use PNG format to preserve transparency and shadow, I am trying to integrate to give the illusion that this slab object is floating above the other layers.  First I tried file > place to position the menu object on edge of header/beginning of the content.  This leaves no option to force the image to span the width of any screen.  I need that I tried to use object > fill > and then clicking on the maximum width of the rectangle (which solves the problem of maximum width), but now I am facing a problem of cutting top and bottom of the image.  The next thing I can think of is to go back to Photoshop and to distort the image, so it is not as big.  In my view, there must be an easier way to achieve will not also give my image an abnormal appearance.  Thoughts?  Thanks in advance.

    Thanks, that's useful.  I also found that I've cropped for a large part of the canvas.  After the increase the surface of the canvas AND fill everything is fine now.  I think that your suggestion may help with the problem of affect scroll I will have when you use different resolutions. I will try to set the size in a single dimension (height) so that different resolution screens see the same scrolling actions.  Mylenium thanks!

  • My screen has moved to the right. Unable to scroll to the top and bottom of the margin on the right side bar. What should I do?

    My screen has moved to the right. The scroll bar on the right side is more visible to use. What should I do?

    Hi roseann.loasby,

    As the display is shifted to the right the problem is more to do with your monitor than Windows. A monitor, it of like a TV and invokes hold vertical and horizontal button options to keep the image in place.

    There should be options on your monitor to make changes to the positioning vertical/hortizonal (in your horizontal case). Most monitors have an 'auto' option that automatically adjusts the diaply photo, so it is well positioned. It's nothing serious, however, you will need to check your user guide for the monitor to see what options you have to use the re - adjust the horizontal positioning. If there is a "menu" button on the front of your monitor try to press to view a display on your monitor. You can then either use the option 'auto' or else click the left/right arrows (usually on each side of the on-screen menu button) to adjust the menu and then the position.

    If you are not confident to do this, you ask someone with more knowledge to do it for you. By pressing the wrong button, you can make the screen more out of alignment, so be careful, as otherwise it will be a matter of trial and error until you have reset the monitor correctly.

    It is a fairly simple job to do, but because every monitor is different, it is difficult to write clear instructions because I could tell you to press a button and this button may not be here, then take a look at your user guide for the monitor first to familiarize yourself with the buttons are available.

    This forum post is my own opinion and does not necessarily reflect the opinion or the opinion of Microsoft, its employees or other MVPS.

    John Barnett MVP: Windows XP Expert associated with: Windows Desktop Experience: www.winuser.co.uk | vistasupport.mvps.org | xphelpandsupport.mvps.org | www.silversurfer-Guide.com

  • I don't know how i ' v, but I lost the toolbars at the top and bottom. [Alt] will not bring up the toolbar and scroll keys do not work. How can I fix it?

    I managed to hide the toolbars, ALL of them. [Alt] brings to the top of the toolbar so that I can change them. In addition, the [previous page] [next page], [home] and [end] keys do not work.

    You can have:

    1. Choose the Mode "full screen" or
    2. unchecked toolbars

    The F11 key activates / turns off Mode full screen or not. Full screen, you have no toolbars, no tab and no bar Add on (bottom).

    If unchecked you your toolbars (checked = displayed; UN - check = not displayed), and then do one of the following, then click on those you want to check/uncheck:

    If this answer solved your problem, please click 'Solved It' next to this response when connected to the forum.

    Not related to your question, but...

    You may need to update some plug-ins. Check your plug-ins and update if necessary:

  • How do I put the buttons at the top and bottom of a page

    Hello

    I have a requirement that each of the 4 buttons be placed at the top of the shape and the bottom of the form as well.  As I tried, I could not find a way to do it.  I use APEX 4.2.2.

    The layout of the page is / < should be > as follows:

    Area of the header

    -various Articles

    < buttons should go here >

    Region 1

    -various Articles

    Region 2

    -various Articles

    Region 3

    -various Articles

    < buttons should also go here >

    Currently I have buttons in a region called the buttons after the region 3.  I tried to place 1-3 areas in my region of buttons (buttons has been defined as their parent region) and then set the property position button up and down, but that just gave me 2 sets of buttons with nothing between them (regions 1-3 should be between them).  The point of view of each of these regions is body of model Page (3)

    So, how can I address my page have two sets of buttons, as shown above?  I know there is a much better way than to create a new set of buttons with dynamic here of actions/process/validations/etc.

    Thank you very much for your help!

    Jason.

    EDIT: The theme has been applied to this app is a custom theme that was created by the theme of Cloud applications.

    jason02 wrote:

    Cloud Apps is theme 101.  My area of container using the model 'Button region Untitled' and the HTML in the definition is:

    #CLOSE # PREVIOUS # ##DELETE NEXT ##EDIT ##CHANGE # CREATE # CREATE2 # EXPAND ##COPY # HELP #.
    #BODY #.

    This is going to sound strange because you want to display buttons, but the region without title button model is not appropriate for what you're trying to do (it is designed to display buttons in positions defined by the chains of substitution in support of button cell). Stranger still, in a theme derived from issue 20, the best model in the region for a container's region without buttons and title. That this legacy theme uses HTML tables-based layout, the jQuery selector that is required in the JavaScript code is more complex:

    $('#container_body td.t20RegionBody:first')
      .append($('#container_body td.t20RegionBody:first table:first'))
    
  • When Firefox opens the home page entirely fill the screen darkening the buttons/icons at the top and bottom of the page

    My cursor at the top of the navigation poster bar bar afford horizontal high to close the page. Otherwise, nothing is displayed on the screen other than the home page. Does anyone have a solution to restore a page to normal size?

    Hello RCara, maybe you have set the browser in full screen - just press f11 to exit full screen again...

  • Stop showing the extension at the top and bottom (blue shading)?

    Windows 7 has a feature where when I move the top border of a window to the top of the screen and then moves from the lower border down and becomes the blue window.  Y at - it a setting or something I can use to prevent this?

    You can go there.

    http://www.howtogeek.com/HOWTO/Windows-7/disable-the-mouse-drag-window-arranging-feature-in-Windows-7/

    Google/Bing is your friend.

  • Unable to get the elements placed at the top and bottom of the cell of the table with vertical-align

    Hello

    I have a three-day educational courses in the list table. In each cell, I have the title of the presentation at the top with the name of the speaker below. Because some titles are longer than others, the line grows (rightly) as longer securities are covered in Word. So far so good. Now, I want all the titles to always start at the same distance from the surface of the cell (I use padding 2px) and names of speaker all be equidistant from the lower border, (i.e. 2px).

    I tried to place the title elements with < span style = "vertical-align: top" > </span > presentation title

    and the name of the speaker as < span style = "vertical-align: bottom" > name </span > Speaker

    and I tried the same method with < div > and < p > tags. Items don't move. Can someone tell me how to make the names of the speakers will be all aligned at the bottom of each cell?

    Here is an example of the code table I've tried:

    (Thanks!)

    < table style = "text-align: center;" do-family: Arial; background-color: #f7d49c; "border ="2"bordercolor =" #467E9F "cellpadding ="2 ".

    "cellspacing ="0"width ="900">"

    < tbody >

    < b >

    < td width = "300" > < span style = "" vertical-align: top; "> This is a short title </span > < br / >"

    < span style = "vertical-align: bottom" > name </span > < table > Speaker

    < td width = "300" > < div > is the title of another presentation, which is really long because some of the presentations have titles like that < / div > < br / >

    < div style = "vertical-align: bottom" > Speaker name < / div > < table >

    < td width = "300" > < span style = "vertical-align: top" > This is yet another presentation with a semi-long title </span > < br / >

    < span style = "vertical-align: bottom" > < table > </span > Speaker's name

    < /tr >

    < b >

    < td > < table >

    < td > < table >

    < td > < table >

    < /tr >

    < b >

    < td > < table >

    < td > < table >

    < td > < table >

    < /tr >

    < b >

    < td > < table >

    < td > < table >

    < td > < table >

    < /tr >

    < / tbody >

    < /table >

    By default, the content of the table cell is average aligned.  You need not do anything.

    If you want your cell vertically aligned up or down, you can specify it in your CSS.  These effects all the text inside the cell.   It's all or nothing.

    Some text that is aligned at the top Some bottom-aligned text

  • How to make scrolling Parallax image extend at the top and bottom of the screen of the iPad vertically and horizontally?

    My website: http://hawkspdx.Club has the functions of Parallax scrolling, which does not completely extend to the bottom of the screen or all the way to the top of the screen on an iPad in vertical or horizontal position. How can I fix this please? The Parallax features work perfectly on desktop version.

    0041-iPad_Horizontal_Top-Parallax.jpg

    Above the iPad is horizontal and the picture behind the (blue) pieces cut before the top of the screen.

    0044-iPad_Vert_Middle-Parallax.jpg

    Here the picture of parallax (blue) low cut with the iPad upright.

    0045-iPad_Vert_Bot-Parallax.jpg

    Here the image in red (green arrow) does not reach the bottom of my screen of the iPad upright.

    0047-iPad_Vert-Top-Parallax.jpg

    Here the function of parallax (red image) does not extend to the top of the screen of the iPad upright.

    It would be necessary to redefine the points of scrolling of the image on the page wells so that they overlap edge on parchment.

    https://www.YouTube.com/watch?v=8m2Lg241e3A

    Thank you

    Sanjit

  • left and right arrows no longer work in Safari, work in Excel, the top and bottom do not work

    left and right arrows no longer work in Safari, work in Excel, arrows up and down to work in Safari.  Any suggestions?

    What you're trying to do with the left and right arrows in Safari? The only time they will do anything is:

    • in a text edit box
    • If the page has a horizontal scroll bar
    • If the page is zoomed

Maybe you are looking for

  • connect two monitors

    I have a 2009 mac with a video card that has a mini port and and Dual port and I want to connect two monitors, how can I do that, I have a monitor with a mini port that is already connected, how do I get a different view to fit with this video card?

  • Problem with the mode standby in Windows 7

    Hello friends, I have a big problem when Windows 7 updated itself. I have a laptop Toshiba Satellite L505D. When I close the lid, it will automatically 'sleep' mode. Unfortunately, the screen is black and the laptop is still in progress, I have to st

  • How to call external programs?

    I've seen people to call external programs through LabVIEW and was curious to know what functions you could use to do this. I'm sure that his works using one of the ActiveX or maybe 'open application reference .vi. Can someone tell me (or show me) a

  • I get a white screen when I try to resume the computer from the stand-by.

    When I try to wake up my Windows XP after standby by pressing the space bar, he falls down and leaves me with a white wallpaper screen. I have to pull the plug to get by, then again upward. What can I do? -RR Original title: die waiting

  • Problem downloading anti-virus Protection

    In trying to download the new subscription of Mcafee protection, Windows continues to close installation of Mcafee quoting only that a 'problem has occurred' how can I solve this problem and update my Mcafee antivirus? I already paid for the new subs