The background color of the CSS div tag does not cover the entire axis

I'm facing a dilemma in my CSS design that's got me stuck. This issue also seems to be present in this forum:

Whenever I zoom in on the page, I noticed that the header background doesn't fully extend across the screen horizontally. Here's how it looks when zoomed out:

This is exactly the same problem I encountered while designing the backgrounds for my header and footer.

Here's my HTML code:

<div id="footerBack">
        <div id="footer">
            <a href="#"><img src="images/eyecolor.png" alt="Eyecolor Icon" /></a>
            <ul>
                <li><a href="#" id="terms">Terms &amp; Service</a></li>
                <li><a href="#" id="privacy">Privacy Policy</a></li>
                <li><a href="#" id="news">News</a></li>
                <li><a href="#" id="footerAbout">About</a></li>
                <li><a href="#" id="footerContact">Footer</a></li>
           </ul>
           <p id="copyright">Copyright &copy; 2012 Jed Designs</p>
           <a href="#"><p id="email">Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aa..ad">[email protected]</a></p></a>
        </div>
    <div id

My CSS: 

 /*Footer*/
#footerBack         {background: url(images/footerBack.jpg) repeat-x; height: 48px;  position: relative; top: -4px;};
#footer             {padding-top: 10px;}
#footer ul, #footer img
            {margin-top: 5px;}
#footer ul          {float: left; margin-left:160px; margin-top: 15px;}
#footer li a        {color: #d6b85e; padding: 7px; margin: 0 8px 0 8px; font: 11px Tahoma, Geneva, sans-serif;}
#footer li a:hover  {background:#d6b85e; color: #73401f;}
#footer img         {float: left;}
#footer #copyright, #footer #email      
            {float: right; color: #e5dca9; font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-right: 12px;}
#footer #email      {margin-top: 2px;}
#footer #copyright  {margin-right: 20px; margin-top: 12px;}

I'm seeking advice on how to resolve this design challenge. Any suggestions? :D

htmlcss

Answer №1

I just tested the code on stackoverflow using IE9 and was unable to recreate the issue you mentioned. After reviewing the provided code snippet, I don't see any clear indications of what could be causing it (although there may be external factors at play).

This might be a problem specific to your computer setup. Have you considered trying the code on a different device to rule out any potential issues with your current system?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to create a donut chart in Highcharts without an inner pie section?

I've been scouring the internet in search of a solution to create a basic donut chart using the Highcharts library. Most examples I come across show donut charts with both an inner pie and outer donut (see here). Is there a way to remove the inner pi ...

javascripthtmlhighchartsdonut-chart

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

csssassatom-editor

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Learning to retrieve specific properties from an event target in JavaScript

Here is the code snippet I am working with: <h1 msgId = "someId"> Some text </h1> And in my code.js file, I have the following function: document.addEventListener('click', function(e) { target = e.target; }, false); I am tryin ...

javascripthtml

Tips for creating a unified user interface framework for various web applications sharing a consistent design

Struggling to create a user interface framework for multiple web applications, I'm faced with the challenge of setting up the infrastructure in our unique situation: We have 7 (or more) different web applications built using asp.net mvc Some of thes ...

javascriptasp.netcssframeworkscdn

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

javascriptjquerycsssvg

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

I encountered a persistent error that I just can't seem to resolve. My goal is to showcase a chart using Chart.js when the mouse hovers over the canvas. However, upon hovering over the canvas, I keep getting a TypeError: t is null error. Error: { ...

javascripthtmlcanvaschartschart.js

Guide to transmitting HTML form information to a different web server with the click of a button

I operate two distinct web servers. One is responsible for the front-end (example.com), and the other manages the back-end (api.example.com). On my front-end server (example.com), there is a simple HTML website with a form that includes an input field and ...

htmlnode.jsfrontend

Design a dynamic table using JavaScript

After spending hours working on my first JavaScript code, following the instructions in my textbook, I still can't get the table to display on my webpage. The id="eventList" is already included in my HTML and I've shortened the arrays. Here' ...

javascriptcssecmascript-6html

How can you display Bokeh HTML visualizations on your WordPress site?

I've developed a Python Bokeh dashboard with visualizations and saved the HTML file. Viewing it in my browser displays the graphs as expected. However, I'm facing issues trying to showcase this dashboard on my WordPress site. Simply pasting the H ...

pythonhtmlwordpressbokeh

Pages with embedded HTML code

Within the confines of locale/lang.json, there resides { "title": "Title", "image": "service-corporate_thumb-v2.jpg", "alt": "alt", "imageFooter": "Some caption %", "imageFooterCTA": "author", "imageFooterURL": "https://example.com/author", } ...

htmlvue.jstranslationnuxt.js

Footer void of color

It's puzzling to me where the extra space in my footer is coming from. It seems to be around 20-30px as you can see on the following url: Despite the code in my footer being minimal, with no apparent cause for this additional space below my social ic ...

htmlcsstwitter-bootstrap

Console command to change paragraph tag color---Modifying the color

I am attempting to change the color of all paragraph tags on a webpage to white by utilizing the console. My initial attempt was: document.p.style.color = 'white'; However, this method did not have the desired effect. Interestingly, I have had s ...

javascripthtmlcss

Arrange the DIVs in the identical spot and switch them back and forth

I'm struggling with a dilemma involving two DIVs. I am looking to have two DIVs positioned in the exact same spot on the page and toggle between them. When one div disappears, the other should appear using jQuery toggle(). The challenge lies in havi ...

csshtmlpositioning

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

javascriptcssvue.jsvuejs2vuetify.js

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

javascripthtmlcss

Display every div element if none of the links have been clicked

On my webpage at url.com/yourfirstpage/, all div elements are hidden by default with a display:none property. If we specifically target #sec1 by going to url.com/yourfirstpage/#sec1, only sec1 is displayed while the others remain hidden. But what if we acc ...

javascripthtmlcss

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

javascriptphphtmlajaxgoogle-maps-api-3

Activate event starting from parent and ascending through child nodes

When I have a table inside a <div class="timely"></div>, and within that table is a <th class="prev"><i>previous</i></th>, Chrome developer tools show an event listener on the <th>. However, Firefox developer tools ...

javascriptjqueryhtmleventsevent-handling

Enhancing readability in a vertical CSS menu with proper spacing

I'm looking to increase the spacing between each menu item as they appear too close together. Can someone help me with managing this? The menu names are currently right under one another, almost touching. What is the best way to create more space betw ...

htmlcss