Header background color does not work

Hi,
I would like to change the background color of the header element, but it does not work as I imagined
First of all, here is the HTML:
<body>
<div id="wraper">
  <header>
    <h1><span>Pacific</span> Coastal Highway</h1>
    <nav>
      <ul>
        <li>Home</li>
        <li>Big Sur</li>
        <li>Pfeiffer Beach</li>
        <li>Elephant Seals</li>
        <li>Morro Bay</li>
      </ul>
    </nav>
  </header>
  // ... some other HTML elements & content ...
</body>
So, within <header> element we have <h1> and <nav> elements, and within that <nav> element there is a list that is actually menu.
Here it CSS code that refers to these elements:
#wraper {
    width: 1200px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
body {
    margin: 0;
    background-color: #CBD2FB;
    font-family: "OpenSans Regular", "Gill Sans MT", Arial, "Times New Roman", sans-serif;
    color: #202020;
    background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
h1 {
    margin-top: 0px;
    font-size: 48px;
    text-shadow: 1px 1px 2px #969696;
    padding-top: 32px;
h1, h2, h3 {
    font-family: "Prociono Regular", "OpenSans Regular", "Gill Sans MT", "Times New Roman", Arial;
    color: #507AAD;
    text-align: center;
h1 span {
    position: relative;
    top: -37px;
    left: 35px;
    font-family: GoodDog, Arial, "Times New Roman", "Gill Sans MT", sans-serif;
    font-size: 47px;
header nav ul {
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    padding-left: 0px;
    width: 705px;
    /* [disabled]margin-bottom: 10px; */
nav ul li {
    float: left;
    padding: 10px;
    display: block;
    width: 110px;
    text-align: center;
    background-color: #A9A3FF;
    border-right: 1px solid #FFFFFF;
    border-radius: 23px;
    background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    margin: 18px 5px;
And, finally, here's how it looks:
Now, I'd like to change the background color of the <header> element (to chage that white behind that <h1> and menu into some other color), so I just added the background color of the <header> element in CSS:
header {
    background-color: #FF2D31;
But, here is how it looks now:
As you can see, although <nav> element with list (menu) is IN <header> element - the background color of <header> is just behind <h1> element.
Do you know why it's happening, and what would be the best way to solve this problem?
Thank you in advance.

Ben Pleysier wrote:
The problem is caused when floated children do not force the parent element to clear the floats.
Nancy O. wrote:
It may seem counter-intuitive but overflow:hidden prevents margin collapse on parent elements containing floats:
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
I'm trying to figure out what happened (and why) in my example, where the problem occurred, but...
I tried with inspecting elements with Firebug - to see what's what in case when there isn't overflow:hidden property that is related to <header> element in this example from the first post:
As you can see in the picture - <header> element is only that blue area containing <h1> element, and although <nav> element (with the <ul> element inside) is IN <header> element - it is not shown within the blue area, as it is not within <header> element.
As for the <h1> element which is inside of the <header> element, when I select it - it looks like this:
Now, purple area indicates the padding-top of <h1> element, and I guess that yellow area which indicates the margin is actually browser's default margin of the <h1> element.
Next, confusing is when I select <nav> element:
Although <nav> element is selected - there is no that blue area indicating where is that element on the web-page... ?
Next, when I select <ul> element, there is only yellow area indicating margin -  I guess that yellow area which indicates the margin is actually browser's default margin of the <ul> element.
When I select <li> element - it's the same case as with <nav> element there is no that blue area indicating where is that element on the web-page... ?
Finally, when I select <a> element - it looks like this:
All in all - inspecting all <header> element and the elements within it didn't help me to see what and why this is happening (with the background color of the header element). I think the problem is in me, I'll wait a few days and maybe then things become clearer in my mind
Sorry for my bad English.
Again, thank you all!

Similar Messages

  • JProgressBar background color does not work in XP with JRE 1.4.2

    Hi,
    I am setting the background color of JProgressBar. While it used to work in 1.4.1, the background color does not show in 1.4.2 on XP. It looks like it has something to do with the XP L&F in 1.4.2. I am setting the L&F to systemlookand feel. Is anyone aware of anyworkaround for this? Setting the opaque property does not help either. I don't want to say swing.xp=false. We need the xp look and feel.
    Any help will be appreciated.
    Thanks.
    Sujatha.

    Actually I draw a blank looking into it a bit deeper. The Windows UI paintXPBackground method is private and the XPStyle class can not be accessed outside the package. I guess the reason for this is to protect the XP LAF from having the backgrounds changed etc.
    If it is important to you the source is available for you to replicate your own MyXPStyle class and then you would have to recreate the whole paintDeterminate methods in your MyProgressBarUI class. It would not be very future proof though.

  • Final Cut 6 and Color does not work

    Hello,
    I bought FInal Cut Pro Studio 2 and i receive the suite today and instal only apps ( no contents and loops )without problem
    Tried to open FCP6 and Color but not working.
    i launch FCP 6 or Color,2 jumps on dock and then quit.
    can be memory problem.( i have 768RAM on my imac G5 64VRAM)
    any pacth to resolv this problem?
    ps* SountrackPro 2,DVDStudio Pro,Motion3,LiveType,CinemaTools and Compressor woks fine in the same computer
    Computer configuration
    IMac G5 1.6 with 64VRAM and 768RAM
    thx in advance

    Ok,forgot Color,but and about final cut 6 ? why does not work?
    max resolution 1440x900.
    i was looking the systen requirements on fcp page
    Minimum Requirements to Install All Final Cut Studio Applications
    Final Cut Pro 6
    Macintosh 1.25GHz or faster PowerPC G4, PowerPC G5 = OK
    1GB of RAM = NO,my iMac have 768RAM
    1024-by-768 resolution or higher OK
    Mac OS X v10.4.9 or later OK
    QuickTime 7.1.6 or later OK
    A DVD drive for installation OK
    Can i deduce that problem is because i don't have RAM enought?
    THX

  • Background color does not show in a design mode preview

    Hi,
    I installed Macromedia studio 8 a couple of days ago, and
    started using Dreamweaver 8 with a "Missing Manual" book. I'm on
    first chapter and following tutorial. It says to change a
    background color to blue, and I did that. But this change was not
    reflected in a design mode preview. I checked the code and it's
    there. I viewed in an IE6, and it was there. My coworker installed
    an evaluation version on his pc and it worked fine. I guess it's my
    pc that has problem. I had IE7 and VS2005 on the pc when I
    installed Macromedia 8. Due to help crash, I uninstalled IE7. It
    did not solve the problem, so I uninstalled VS2005 and related
    programs, and it did not solve the problem. I uninstalled and
    reinstalled Dreamweaver 8 a couple of times, and it did not help.
    Does anyone out there who have similar experiences, please share it
    with me? I post this here before redo my pc. Thanks.

    <shrug>
    Without seeing code, it would be impossible to guess....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    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
    ==================
    "jaivora" <[email protected]> wrote in
    message
    news:[email protected]...
    > This is way too much - I too am reading the same book
    and am stuck at the
    > same
    > place - Not only does the background not appear in
    dreamweaver, but nor do
    > the
    > new colors set for the active links, rollover links, etc
    - After setting
    > in the
    > new colors, the "Page Property" section will not reflect
    the new colors -
    > While
    > all the time Safari will show the page correctly.
    >
    >
    >
    quote:
    Originally posted by:
    Newsgroup User
    > Do you also have the same exact code? That's where the
    answer always
    > lies....
    >
    > --
    > Murray --- ICQ 71997575
    > Adobe Community Expert
    > (If you *MUST* email me, don't LAUGH when you do so!)
    > ==================
    >
    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
    > ==================
    >
    >
    > "LaValliere" <[email protected]> wrote
    in message
    > news:[email protected]...
    > >I am having the same exact problem as the other
    person, except I can not
    > >find
    > > the manual uninstall that seemed to fix their
    problem. The funny thing
    > > is
    > > I am
    > > reading the exact same book as they were and the
    problem happen at the
    > > same
    > > point in the very first chapter. The background was
    working fine
    > > before.
    > > Thinking back I realised the book said to go to the
    website for any
    > > updates,
    > > which I did. After that . . . . no background color
    is visible. I have
    > > also
    > > attempted to uninstall and reinstall. No luck. Can
    you help?
    > >
    >
    >
    >
    >
    >
    >

  • Changing JInternalFrame color does not work

    UIManager.put("InternalFrame.activeTitleForeground", new ColorUIResource(Color.red));
    UIManager.put("InternalFrame.activeTitleBackground", new ColorUIResource(Color.red));
    UIManager.put("InternalFrame.borderColor", new ColorUIResource(Color.red));This code does not make anything appear red on my JInternalFrames .. the header etc. still looks purple when selecting one ... why is this?

    That is because the internal frame isn't using those settings for setting the color of the internal frames. If you look at the code in javax.swing.plaf.metal.MetalInternalFrameTitlePane you can see that the title pane is drawn using:
    MetalLookAndFeel.getPrimaryControlHighlight() MetalLookAndFeel.getPrimaryControlDarkShadow()
    MetalLookAndFeel.getPrimaryControl()
    MetalLookAndFeel.getControlHighlight()
    MetalLookAndFeel.getControlDarkShadow()
    MetalLookAndFeel.getControl()
    If you wish to change the color of internal frames, you have to either change those settings L&F wide, or create your own internal frame title bar UI classes (not a small task you will find).
    Why doesn't it use those settings? No idea, it should use something like that.

  • Events Click Set Property Fill Color does not work.

    Setting Stroke Color does work.  Setting Fill Color is accepted by the user interface, but nothing happens.  I was applying this to a Basic Circle Shape.
    Until this is fixed, my alternative is to define a "custom event".  I have assigned a name to a "custom event" but can find no way to define it's action.  Can anyone help me with this or point me to the documentation on this?
    Thanks.

    You also need to register the fields which you want F4 event to become active for.
    DATA: it_f4 TYPE lvc_t_f4,
            wa_f4 TYPE lvc_s_f4.
      wa_f4-fieldname = 'CONNID'.
      wa_f4-register = 'X'.
    *     wa_f4-GETBEFORE = 'X'.   "if you want to trigger before F4
    *      wa_f4-CHNGEAFTER = 'X'. "or just after it
      APPEND wa_f4 TO it_f4.
      CALL METHOD g_alv_grid_ref->register_f4_for_fields
        EXPORTING
          it_f4 = it_f4.
    Regards
    Marcin

  • The visited sites font color does not work

    if I revisit the site. the color does appear while the left-click is held then is gone

    * Make sure that you not run Firefox in (permanent) [[Private Browsing]] mode
    * In Private Browsing mode some menu items are disabled (grayed) and features like visited links are disabled and not showing
    * You are in Private Browsing mode if you see "Tools > Stop Private Browsing", possibly grayed
    * You enter Private Browsing mode if you select: Tools > Options > Privacy > History: Firefox will: "Never Remember History"
    * To see all History settings, choose: Tools > Options > Privacy, choose the setting <b>Firefox will: Use custom settings for history</b>
    * Uncheck: [ ] "Automatically start Firefox in a private browsing session"

  • When trying to connect my iPod Classic to a docking station/fm transmitter/head phones it does not work. How come?

    When I go to connect my iPod to a docking station or my fm transmittor it shows that the song is playing but will not work. The only time it has worked was when it was conencted to an original ipod cord. My FM transmittor will play any other ipod but my own. I was wondering what I could do to fix this or what I should do.

    Depending if you have apple care then you should be able to replace it. Or, it could be the cord that you are plugging it in with/ docking station. It ma not work also.
    I hoped this helped
    <Edited by Host>

  • Background refresh does not work as expected

    Hello All,
    I am brand new to iphone after using Android for several years, one thing that is really bothering me is the way certain apps seem to behave and how the background app refresh seems to have no affect when on or off.
    The examples I will use is Whatsapp & Kik (Both messaging apps)
    If someone sends me a message on either of the above then I get an alert saying 1 new message, however that message doesn't download to my phone, what seems to happen is when I open the app it says "connecting" at the top of the screen for a while and it takes a few seconds (sometimes longer) for the message to appear. If I have poor signal it is very frustrating, I know I have several messages and my phone says that, but because I cant connect it just goes round in circles for ages saying connecting and failed and i cannot read my messages until i have full signal again.
    On the android, if I got a notification to say I had a whatsapp message then that message would download automatically, even if I had no signal at the point of opening the app then it would instantly show the new message, because it had downloaded it immediately in the background, of course I couldn't reply with no signal but at least I could read it which i cant with the iphone.
    so, my understanding of Background refresh would be that it would resolve my issues, if the app updates in the background and i get a message, surely that means when I open it 20 minutes later that the new message would be present? but it's not, even with app refresh on it makes no difference to what I'm saying.
    Am I reading app refresh all wrong and can anyone see my point and explain if I'm doing something wrong.
    sorry to bang on but another example could be facebook, if i dont go on it all day but have app refresh on and have the task open, surely when I eventually load it it should have all the latest feed on my timeline - but it doesnt, it will be exactly as I left it the day before and would spend the first 30 seconds updating.
    Please please feel free to comment and let me know if I'm doing something wrong or misunderstanding the backgound app refresh function
    My phone is the iPhone 5s and is on the latest IOS 8.1.1 but was the same on 8.1.0 and whatever was previous to that.
    I am on the three network pay monthly and all issues i mentioned about relate to being on 3G and on wifi so it's not a signal issue.
    I'm soooo confused :/
    Thank you

    I Have your same question, I don't understand the advantages of keeping the app refresh on....

  • Background saving does not work in background when it is part of an action

    I LOVE the new background saving function. I do agree with a nother post that it would be nice to have some kind of progress bar when in full screen mode though.
    The other thing I noticed is that if you make an action that has a "Save" command in it, it will NOT do that in the background but rather in the way of previous versions, with the progress bar window pop-up.

    Agree

  • Flash Player Background Updater does not work

    Since FP 11.2 I was expecting all our workstations to update Flash Player automatically when an update is released. However since FP 11.3 was released a few days ago, all our users have been prompted to install the new version every day.
    Just to confirm we have "Allow Adobe to install updates (recommended)" selected in Flash Player Settings Manager.
    Is this the correct behaviour or am I missing something?

    You don't say on what Mac, and you haven't actually asked a question, but perhaps this might be helpful:
    The latest version of Adobe FlashPlayer can be obtained from here:
    http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash
    You can check here:  http://www.adobe.com/products/flash/about/  to see which version you should install for your Mac and OS. Note that version 10,1,102,64 is the last version available to PPC Mac users*. The latest version, 10.2.152.25 or later, is for Intel Macs only, as Adobe no longer support the PPC platform. Note that the latest Flash Player update only works on YouTube with Safari in 32 bit mode - until YouTube correct this.
    * Unhelpfully, if you want the last version for PPC Macs, you need to go here:  http://kb2.adobe.com/cps/142/tn_14266.html  and scroll down to 'Archived Versions/Older Archives'. The first one on the list, Flash Player 10.1 is the one you download. More information here:  http://kb2.adobe.com/cps/838/cpsid_83808.html
    You should first uninstall any previous version of Flash Player, using the uninstaller from here (make sure you use the correct one!):
    http://kb2.adobe.com/cps/865/cpsid_86551.html#prob1=uninst,os=m10.6,
    and also that you follow the instructions closely, such as closing ALL applications first before installing. You must also carry out a permission repair after installing anything from Adobe.

  • In Photoshop CS6 Hue Saturation does not work with forground/background Jitter set at 100 percent no change in color is observed. Help

    In Photoshop CS6 Hue Saturation does not work with forground/background Jitter set at 100 percent no change in color is observed. I have Added a screen Shot of the Brush settings and a demonstration of what the brush produces.
    I also notice That when I make a pattern of a single color, when I fill a selection with the pattern I get a rainbow of different colors.
    I am running a 64 bit version of Photoshop from the CS6 Masters Collection
    I am on a PC with a Intel i7 1366 4 physical cores and 8 threads, 24 Gig of DDR memory, A Crucial 512 Gig SSD and a NVIDIA GTX 570 with 2 Gig of memory.
    The document size is 2100 by 1500 Pixels at 300 PPI   only two layers

    In Photoshop CS6 Hue Saturation does not work with forground/background Jitter set at 100 percent no change in color is observed. I have Added a screen Shot of the Brush settings and a demonstration of what the brush produces.
    I also notice That when I make a pattern of a single color, when I fill a selection with the pattern I get a rainbow of different colors.
    I am running a 64 bit version of Photoshop from the CS6 Masters Collection
    I am on a PC with a Intel i7 1366 4 physical cores and 8 threads, 24 Gig of DDR memory, A Crucial 512 Gig SSD and a NVIDIA GTX 570 with 2 Gig of memory.
    The document size is 2100 by 1500 Pixels at 300 PPI   only two layers

  • Row highlight does not work when class has a background-clolor

    This is more a CSS / javascript question but since the problem occurs in Apex I'll try my luck here.
    I try to implement a row highlight feature that worked in 3.2 but not in 4.0. The difference is that the style that is used for the table cells contains a background-color in the 4.0 template and it did not in 3.2.
    This is how it works.
    I created a report template with "before each row" : <tr onMouseOver="cOn(this);" onMouseOut="cOut(this);">
    The javascript does this:
    function cOn(td) {
       if(document.getElementById||(document.all && !(document.getElementById))) {
          if (td.previousSibling != null) {
              td.style.backgroundColor="#FFFF99";
              td.style.color="#000000";         
    }My thought was that td.style.backgroundColor="#FFFF99" would overrule the background color given by the class but when this happens from within javascript this does not work. Is this proper behaviour? Are there other methods that will work?

    Hi Rene
    If you are just looking for a row highlight on a mouse hover, it might be easier to place the following in the html header of the page:
    <style = text/css>
    .apexir_WORKSHEET_DATA tr:hover td {
    background-color: #FFFF99 !important;
    color: #000000 !important;
    </style>
    ~Andrew Schultz

  • SUBMIT does not work in background...

    Hi guys,
    We have a copy program of a standard transaction and once we use this copy program in the main program via SUBMIT... it does not work in background...
    Why is this so,,, Please advice...
    THanks!

    Hi,
    When executing some program using the statement like SUBMIT prog_2 WITH parameters and RETURN.
    In foreground PROG_2 is executed, and once you click on the BACK button the code written after this SUBMIT statement will be executed.
    If you are executing the same in the BACKGROUND mode, no feasibility of clicking on BACK button, hence control will remain in the PROG_2 only after executing its logic.
    Please code accordingly.

  • I changed my appleID, it worked fine but now I can not restore icloud backup in a new ipad (old appleid does not work and it is grey colored so I'm unable to change it)

    Some months ago I changed my email address and so my appleID. Everything worked fine, but last week my ipad broke and when I tried to restore my icloud backup in my new ipad it does not work: it asks me for the password of the OLD appleID (it doesnt work); and in icloud configuration page the field for appleid is colored grey so I can not change it.
    any clues? thank you in advance

    My suggestion is to change apple id back. I know it is not something you want to hear, but there are suppose to be ways around it and usually they work, but not right now. I suspect that is consequences of Apple getting their servers ready for ios7. Normally in your situation - you should be able to get all your stuff back, but apps, and then you can sync those or download from icloud. But lately (last week) it does not seem to work normal way.

Maybe you are looking for

  • Vendor Down Payments Control

    Hi,      I want to implement a validation for Vendor Down Payments. When a user enters a PO line item into a down payment document, I want to check if the amount of the PO's line item is greater then the down payments line item. Where can I set this

  • BAPI_PROCORD_CHANGE for process order operation level change

    Hi, Can any buddy tell me how to change operation dates in process order with following requirement: Process order scheduling type is 'Forward', 1st step, read operation start dates 'Earliest Dates' and 'Latest Dates', 2nd step, change operation 'Ear

  • NullPointerException JFrame

    Hi guys, I am getting this error: Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException      at com.ankix.snapxplorer.gui.pane.explorer.events.MenuBarActionListenerImpl$1.run(MenuBarActionListenerImpl.java:134)      at java.awt.event.

  • Not able to draw any AP Divs

    Hello everyone. I'm quite new to Dreamweaver so please bear with me. For some reason all of a sudden I can't draw any AP Divs anywhere except  on the background of a window. When I try to draw an AP div over another layer I can't; my mouse gets the b

  • In jdev jsp and Html is not working

    My JDevloper is showing some problem, when i m writing code in simple java file (class) its working. but when i m writing code in JSP it is getting compiled but when i m trying to run it ,it not getting,Even ocj server is getting started and the adsr