Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely!

However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my container image disappearing.

/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}

I tried removing position:relative; but that didn't solve the problem. It's important to note that I am reliant on a web content manager due to limited access, resulting in my CSS sheet being placed oddly on the page. Here is how the current page appears without the bgcontainer.gif: View the current page

Your assistance is greatly appreciated. Thank you

csshtml

Answer №1

Using firebug, it is evident that the HTML structure of the two pages varies significantly. The "good" page has a ".container" div as the main wrapper for most content, indicated by a black border:

Conversely, the "wrong" page features a "#container" div in the same area with another nested ".container" div inside. This nested div only wraps the header.

The "#container" div on the "wrong" page spans the entire width of the page.

On a side note, I appreciate your design choice.

UPDATE: This is how the page appears after applying float: left; and left:107px; to the ".container" div.

Answer №2

Let me highlight the main issue:

The disparity in HTML page structures makes it impossible to attribute this issue to just one line of code. The "old" page incorporates 5 stylesheets, while the "new" page relies on only a single stylesheet.

When you introduce your default.css stylesheet, the discrepancy between your old and new pages becomes apparent. The old page is influenced by FOUR other stylesheets that are also affecting the styling, often overriding your own styles.

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

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

Retrieving all options from a dropdown list in HTML using ASP.net C#

I am currently working with a select list that looks like this: <select name="Section" id="Section" size="5"> <option>Section1</option> <option>Section2</option> <option>Section3</option> <option>Section4< ...

c#javascripthtmlasp.netlist

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

javascriptjqueryhtmlcss

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

javascripthtmlfunctioniterator

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

cssinternet-explorer

What is the best way to extract text that falls between two specific patterns using the preg_match_all function in PHP

I've been struggling to locate two specific HTML tags and extract the content in between them. When I search for each tag individually, they are found successfully, so I am confident that they are spelled correctly and do exist. However, I believe the ...

phphtmlregexpreg-match-all

"Utilize Angular's functionality to include labels for checkboxes generated using *ngFor directive

I am currently working with Angular 5 My goal is to generate multiple checkboxes using the code below and provide them with labels <input type="checkbox" *ngFor = "let v of options[0].options" [value]="1" [name] = "1"> Typically, when working with ...

htmlangularangular5

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

javascriptwebkitcss

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

What is the best way to declare a minimum and maximum date in HTML as the current date?

I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...

htmlangulartypescript

Colorbox: Display a specific section from a separate HTML page

Currently, I am facing a challenge where I need to open just one specific part of an external HTML page in a colorbox. I attempted the following approach, however it is opening the entire page instead of just the specified part (at the div with id="conten ...

javascriptjqueryhtmlajaxcolorbox

Does the zoom value in the HTML file adjust when I zoom in or out on the Google Map?

I'm uncertain if my question is sufficiently clear. Here's my dilemma: I've been utilizing the gmplot module in Python and I'm interested in adjusting the grids to be scalable based on the zoom level of the Google Map. However, being u ...

pythonhtmlgoogle-mapsgoogle-maps-api-3

Obtaining a URL in JavaScript

Hey there, I'm diving into the world of JavaScript and could use some guidance. I'm currently working on implementing forward and backward buttons on a webpage. The URL structure is http://webaddress.com/details?id=27 My goal is to write two fun ...

javascripthtml

Using jQuery to target multiple div elements sharing a common class that are separate from the currently selected div

I am facing a challenge with a div that has a variable number of specific children that I need to toggle between hide and show. It's difficult to explain, but the following code provides a clear example. <div class="item_content_container"> ...

jqueryhtml

What is the best way to adjust the vertical margin in a vis.js timeline?

The vis.js timeline sets a margin of 5px in each row using inline styles that are controlled programmatically by the library. The height, top position, and transform of each item within the row are specified by the library as well. Attempting to manually ...

javascriptcsstimelinevis.js

Align an image with text using CSS and HTML

I'm having trouble with my CSS and HTML code. I want to align the text to the right of an image in a grid format, but it keeps appearing below the image instead. Here is the code snippet: <html> <head> <style type="text/css"> #conta ...

htmlcss

Creating two submenus in the sidebar: a step-by-step guide

I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...

htmljquerycssjquery-mobile-navbar

switch between showing and hiding dynamic table rows

As I dynamically add rows to a table, each row can either be a parent row or a child row. My goal is to toggle the visibility of child rows when the parent row is clicked. if (response != null && response != "") { ...

javascripthtmlajaxjquery

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

javascripthtmliphone

Eliminating the 'white-space' surrounding concealed images

I am currently working on a project where I have a list of images that need to be hidden or shown based on the click event of specific <li> elements. While I have managed to achieve this functionality successfully, I am facing an issue with white spa ...

javascriptjquerycssjquery-mobile