My challenge involves styling a container named #profile-grid to be exactly 330px wide. Within this container, there is an image and an inline list that are both supposed to be the same width as the container with a 1px border all around. Surprisingly, everything lines up perfectly in IE, but Chrome seems to be cutting it short by 2px. Can someone help me figure out what might be causing this discrepancy? Check out my code snippet at http://jsfiddle.net/ZPQUP/13/
The main issue at hand, as indicated by your heading, revolves around the box model.
To address this issue effectively, it is recommended to explicitly set the box model and then utilize a polyfill to ensure compatibility with older browsers. For further insights into this problem and its solution, refer to Paul Irish's explanation available at:
You can see how this concept is implemented in an updated fiddle by visiting: http://jsfiddle.net/mstauffer/ZPQUP/14/
In essence, the various box models vary in terms of whether borders and paddings are included within or added externally to the width.
The #listed division measures 330 pixels across, with an additional pixel on either side for the border according to the 'standard' box model. To ensure proper alignment, adjust the width by subtracting 1 pixel from each side (resulting in 298px)...
...this adjustment should yield consistent results in modern browsers, although older versions of IE may present a challenge. Utilizing a valid DOCTYPE declaration can help remedy this issue.
Sample HTML:
<div id="profile-grid">
<img src="http://example.com/profile-pic.jpg"/>
<ul id="listed">
<li class="item"><a href="#"> Profile </a></li>
<li class="item"><a href="#"> About </a></li>
<li class="item"><a href="#"> Photos </a></li>
<li class="item"><a href="#"> Albumlist </a></li>
</ul>
</div>
CSS Styling:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
Important Details:
<ul> automatically expands to the width of its parent element. If the parent is 330px wide, the <ul> will also be 330px wide.
If no width is specified for a block element, its 100% width includes borders. Therefore, if the parent is 330px wide, the block element (in this case <ul>) will be 298px wide plus 1px left border and 1px right border.
Specifying width for an element excludes borders from the count, causing overflow in some cases.
Using display:block and width:100% for images maintains their ratio without distortion.
To prevent encountering this issue, it is recommended to avoid combining width with padding or border properties on the same element.
In your particular scenario, if you eliminate the width: 330px declaration from the .listed class and instead apply it to the .listed ul class, the problem should be resolved:
#listed {
display: block;
padding: 0px;
margin: 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0;
padding: 0;
overflow: hidden;
width: 330px;
}
I am looking to implement a feature where the drop-down option is displayed or hidden based on the selection of a radio button in AngularJS. If the "Overall Company" radio button is selected, then the drop-down element should not be shown. If the "Demogra ...
I have created a custom FAQ script using dl, dt, and dd elements: $('.faqs dd').hide(); // Hide all DDs inside the .faqs container $('.faqs dt').hover(function(){ $(this).addClass('hover' , 'slow')},function(){ ...
I am trying to create a togglebutton for a website with Microsoft Visual Studio and am not sure if this would be the correct code to apply. I am working in C#, so the button is going to be generated in C# (and a bit of jquery) code and eventually styled in ...
Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...
I've experimented with various CSS methods to align the icons with the text, but I'm facing an issue where the icons seem slightly shifted upward from the text baseline. Here is how I target the icons: /* Styling for the full-height sidebar ...
Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...
My goal on the Roman Numismatics page is to place the yellow 'bid' button at the lower right corner of each frame. Current code <p><a href="<?= $product->page_url() ?>"><img border="0" alt="Bid&qu ...
I encountered a perplexing issue that has left me stumped. I am dynamically populating data into an html <select></select>. However, upon refreshing the page, I noticed that sometimes the data loads successfully, but most of the time it does n ...
Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...
Instead of sharing code snippets, I’ve encountered difficulties in getting my jQuery code to work correctly. If you're curious, you can view the issues on Stack Overflow: Why doesn’t this jQuery code work? and This jQuery hide function just does n ...
In my Node.js application, I have the following file system structure: public elegant-aero.css stadium-wallpaper.jpg team-results.html public.js app.js teamresults.mustache I am trying to dynamically populate a dropdown menu based on user sele ...
Today I've been tackling numerous bugs, but there's one particularly tricky bug that has me stumped. The snippet of code below pertains to a basic logon page. Currently, the only valid username is 'admin' and the corresponding password ...
Whenever I click on the email address example [email protected], my first checkbox gets checked inexplicably... I have created a fiddle to demonstrate this issue... http://jsfiddle.net/pZ8jY/ <table class="checkboxes"> <tr> <td ...
As a novice in the realm of creating charts using pandas and converting them into JSON format, I am faced with the challenge of displaying numerous graphs while conserving space. I am seeking guidance on how to implement a filtering system to only show the ...
Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...
Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...
Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...
Currently, I am in the process of reviving an old game reminiscent of Tron using HTML5 canvas and JavaScript. The unique twist in this version is that the snakes have the ability to move in curves rather than right angles (known as Achtung Die Kurve). The ...
Occasionally, I come across this form: <input type="text"></input> But considering that it is the default as shown on MDN, is there any benefit to explicitly stating it? ...
Currently utilizing Bootstrap version 4.0.0 Check out this example:: https://getbootstrap.com/docs/4.0/examples/pricing/ Is there a way to ensure a button is always at the bottom? Here's the jsfiddle link: https://jsfiddle.net/34shLh1m/ HTML Code: ...