iOS nested elements: surrounding edges reveal parent's background

When viewing nested elements on iDevices, the parent's background is visible, creating a border or outline that is consistent across browsers (tested on Chrome and Safari). It has a similar effect to a bleed in printing. Can someone provide assistance with this issue?

Below is a simplified code snippet and JSFiddle for reference: http://jsfiddle.net/5eTDD/6/

<div class="a">
   <div class="b"></div>
</div>​

.a {background:#000; margin:10px; display:inline-block}
.b {width:100px; height:100px; background:#fff;}​

SCREENSHOT:

iphonecssipad

Answer №1

It appears that the border is showing up on the anchor element instead of the list element. To address this issue, you can try including the following CSS code:

a {border:0 !important}

iDevices come with a default stylesheet that may be causing this problem, hence the use of !important to override it. It's possible that the issue is linked to the "active" class - you might want to experiment by changing the class name to something like "active1" to see if that resolves the problem as well.

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

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

csssemantic-ui

The .fill attribute in SVG seems to be having trouble functioning as intended

Could someone please clarify why I am unable to modify the fill of this svg: <div class="container"> <ul class="todo"> <li> This is an item <div class ="buttons"> <button class="remove"> <svg ...

htmlcsssvg

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

Hi there, I have a query regarding the General Sibling Selector. Let's start by looking at the HTML: <div id="layout-middle"> <div id="Center"> <a class="col Picture1">Title1</a> <a class="col Picture2">Title2< ...

htmlcss

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

imagecss

Whenever I adjust the size of the div tag, it automatically shifts to the left and loses its responsiveness on mobile devices

This custom class has been created to adjust the size of the div tag and add margins in order to center the elements within the div. .adjust-width { width: 900px; position: center; margin-top: 50px; margin-bottom: 100px; margin-right: 150px; ...

htmlcss

Deactivate the attribute in the media query

I made some website with pure html/css. I defined overflow-y: scroll to some element when browser is full screen. But when screen's width is less than 400px, I want to disable that. (like, overflow-y: none. But overflow-y doesn't have none) Is ...

css

What is preventing Facebook from merging its CSS/JS files together?

I wonder about the reasoning behind Facebook developers' decision not to consolidate their scripts and stylesheets into single files, opting instead to load them on demand through their CDN. Considering the complexity of Facebook as an application, I ...

javascriptcssperformancefacebookcdn

Received an error while working on web development in Bootstrap with npm

I recently watched a freeCodeCamp video tutorial on web development which can be found here. Despite following the tutorial step by step, I encountered the following error message while running the webpack script: PS C:\Admin-Dashboard> npx webpac ...

javascriptcssnpmwebpack

The effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

htmlcssipadorientation

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

What is the best way to maintain body alignment while zooming in and out on a web page? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> body { font-family: 'Merriweather Sans&apos ...

javascripthtmlcssweb

Element failing to adhere to CSS grid layout

I am currently working with grid layout and aiming to position the following content at the bottom and center, but it is currently aligning to the left: .body { margin: 0; background-color: rgb(255, 237, 237); display: grid; grid-template-rows: ...

htmlcss

How to perfectly center a dropdown menu using CSS across different web browsers

I am dealing with a dropdown menu that is auto-generated by WordPress, so altering the HTML structure is not an option. However, I have the flexibility to adjust the CSS styling to correct an alignment issue in my dropdown menu. Currently, I'm facing ...

htmlcss

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

CSS image buttons are causing active_link_to list items to disappear when they become inactive

I'm struggling to get the nth css button/list elements to display correctly using active_link_to. The first css button appears without any problems and is active, but when I try to add new buttons to the list, they seem to disappear. HTML <li cla ...

htmlcssruby-on-rails-4

Two sets of buttons, however, one set is carrying out the incorrect function

I am trying to create two button sets that, when clicked, are supposed to angle the text below them at 45 degrees. However, I am facing an issue where both set 1 and set 2 only control the text linked to button 1. I need each button set to control their ...

javascriptcssbuttonrotationrotatetransform

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

javascriptjqueryhtmlcss

The image wrapping feature within a div element will only function properly when there are more than one line of text present

I have come across a strange issue that I am struggling to solve. I have an image within a div with the float: left; attribute, but this styling only seems to work when the div has more than one line of text. When the div contains just one line, it ends ...

htmlcss

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

javascripthtmlcssaccessibility