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

The PDF file cannot be displayed due to the dynamic loading of the path and filename

Currently, I am working on an AngularJS and Java application. The following HTML code is utilized to open a PDF file in the browser. However, there seems to be an issue where the PDF does not open when dynamically passing the value for the data attribute. ...

javascriptjavahtmlangularjspdfobject

CodeIgniter: Bootstrap disables become enabled once validation is completed

My modifuser views have a disabled input field set to hold the id value. <?php echo form_open('user/updateuser'); ?> <legend>Update User</legend> <div class="form-group"> <label for="id">ID</label> ...

htmltwitter-bootstrapcodeigniter

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Equal size images displayed within cards in Material UI

Is there a way to create a list of Material UI components with images that have uniform height, even if the original images vary in size? I want to make all image heights responsive and consistent across all cards. Any suggestions on how to achieve this? ...

javascriptcssreactjsmaterial-ui

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

javascriptjquerycssajax

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

javascriptjqueryhtmlcss

Shifting focus among an array of standard <input> controls with each keystroke

When working with Angular, I encountered a situation where I have an array of arrays of numbers, as shown below: [ [1,1,1,1], [1,1,1,1] ] In my HTML file, I am using ngFor to generate input controls like this: <table> <tbody> ...

htmlangular

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Recently, I've been working on a game using Phaser and encountered some issues while trying to run the code in XAMPP. The game's base is located at htdocs/itw/test.html, with the necessary pngs and json file stored in htdocs/itw/assets/. The pngs ...

javascripthtmlxamppphaser-framework

Text Module of the Divi theme

Issue Resolved (After noticing that Divi was adding padding twice to <ul>'s in their footer and Text Module, I created a new class to remove the padding-bottom from the sub-list item.) In a Divi text module, I created an unordered list with a s ...

csshtml-listsdivi-theme

The outcomes of my JavaScript code are not aligning with my expectations

I've been experimenting with printing objects from an API using JSON and AJAX, and I noticed that the console.log works perfectly to display the output. However, I'm having a bit of trouble with my generateCreatureDiv function as it doesn't ...

javascriptjqueryhtml

Alignment issue: Center alignment failing to work correctly

I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the ...

htmlcss

Issue with Arabic characters displaying incorrectly in Outlook 2007

I have encountered an issue with my newsletter application where the newsletters are in Arabic. When viewed in the browser, everything looks fine. However, when opened in Outlook 2007, strange text appears instead. Interestingly, if the email is marked as ...

htmlcssemailoutlook

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Is there a way to save an Html5 canvas element as an image file using Javascript? I've tried using the CanvasToImage library, but it doesn't seem to work for this purpose. You can view my current code on JsFiddle. <div id="canvas_container" ...

javascriptjqueryhtmlcanvas

`How to Customize Page Titles and Add Content in WooCommerce`

Currently, I am facing a challenge in adding content after the page title and changing the style of the page where all products are displayed in WooCommerce. Unfortunately, I am unsure about the location of the file that needs to be copied to my custom t ...

phpcsswordpresswoocommerce

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

javascripthtmlcsswebhamburger-menu

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...

htmlcsstwitter-bootstrap

Combining PHP and MySQL with a join statement

I am trying to calculate the average rating for each store in a directory list using MySQL's AVG function. Whenever someone reviews a store, they assign a rating ranging from 1 to 5. This rating is then inserted into the rating column of the reviews ...

phphtmlmysqlsql

Transforming the content of a <div> into a variable in PHP

There is a website where you can place orders for various products. The titles of the products available to order are embedded in the HTML code like this: <div class="whatever"> Title </div> I am trying to extract this "title" and assi ...

phphtml

What is the proper HTML tag and syntax used for adding a text box within the content of a webpage?

Question about HTML: How can I add a text box or block to an HTML page that is filled with plain text? I want the text box to align to the right and be surrounded by the plain text, essentially wrapping around it. I also need to specify the dimensions of ...

htmlcss

Google/StackExchange Menu Tab

I am interested in creating a navigation bar similar to Google's or StackExchange's new one, where it is always positioned at the top. It does not need to be fixed there, but I would like it to have links only. How can I achieve this layout with ...

htmlcss