Improper Placement of CSS in Google Chrome

I'm facing an issue with my login form that displays perfectly fine in all browsers except Google Chrome. In Chrome, it tends to get distorted more often than not.

CSS

* {
    margin: 0;
    padding: 0;
    width: auto;
}

body {
    background: #E8E8E8;
}

#logo {
    width: 244px;
    height: 70px;
    margin: 0 auto;
    border: 0;
    background: url(../img/logo.png) no-repeat;
}

#loginbox {
    width: 330px;
    height: auto;
    border: 1px solid  #6A6A6A;
    background: url(../img/bg-top-login.png) repeat-x;
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    margin-top: 80px;
    box-shadow: 0 0 10px #828282;
    -webkit-box-shadow: 0 0 10px #828282;
    -moz-box-shadow: 0 0 10px #828282;
}
cssgoogle-chrome

Answer №1

For optimal styling, it is recommended to utilize these images as CSS backgrounds:

<p class="textlogin">Usuario</p>
<input type="text" placeholder="Digite Seu Nome de úsuario" name="usuario" />
<div class="ico"><i class="usuario"></i></div>

<p class="textlogin">senha</p>
<input type="password" placeholder="Digite a senha da conta" name="senha" />
<div class="ico"><i class="senha"></i></div>

CSS:

.ico i {
     display: block;
       width:20px;
       height:20px;
       margin-top:2px;
       margin-left:4px;
}
.ico i.usuario {
    background-image: url('http://s12.postimg.org/ad8v4wvex/user.png');
}
.ico i.senha {
    background-image: url('http://s13.postimg.org/iexiozs83/loked.png');
}

An issue in your CSS code is the incorrect property for the .ico class, which may disrupt the layout:

.ico{
    top:-12px;);

To ensure consistency, consider adding a background-color as a fallback if the background gradient image fails to load:

.ico{
background:#eee url(../img/bg-ico.png) repeat-x;
}

Take a look at the revised fiddle here: http://jsfiddle.net/n23fh/3/

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

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...

htmlcss

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

htmlcsscss-selectors

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

What is the best way to retrieve a style property from a <style> tag using JavaScript?

Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...

javascripthtmlcss

Stacked divs needed to be aligned vertically

Is there a way to make the head and main tabs fixed vertically one below the other? Keep in mind that these need to be separate angular components and cannot be combined under another div. The rows also need to be scrollable. .pages { float: left; ...

htmlcss

Using getServerSideProps in Next.js is preventing the global css from loading

In my Next.js application, I have defined global styles in the file /styles/globals.css and imported them in _app.tsx. // import default style import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return <Component {...pageProps ...

cssnext.js

What is the reasoning behind placing the CSS file in the header section and the JS file at the bottom

Hey there, I need some help. Why is the CSS file included in the header section but the JS file at the end of the page? Can I also include the CSS file at the bottom of the page? <!DOCTYPE html> <html> <head> <link type= ...

css

Is the absence of http(s) in <link ...> causing any issues?

I recently noticed a peculiar link on the Font Awesome homepage that seems to work without including http or https. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> This made me wonder, what does // a ...

htmlcsshttpnetworking

What is the best way to assign the order position in CSS?

I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...

cssreactjs

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...

javascriptcssangulartypescript

Creating a scrollable HTML5 div container with fixed divs positioned within it

I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representat ...

csshtmloverflowcss-position

Using jQuery to enhance the functionality of the drop-down select feature

I am facing an issue with my index file code. When I select something from the drop-down menu, I expect to see a related dropdown appear. Although I have added this code to my file, I am unable to get the drop down to show after selecting the main type. ...

javascripthtmljquerycss

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

javascriptjqueryhtmlcssanimate.css

Adjust image placement when resizing the window or rotating a mobile device

When the window is maximized or the phone is in portrait position, the magnifying glass stays in its place. However, when I resize the window or rotate the mobile phone, the position of the magnifying glass changes. I've tried using different units ...

htmlcss

What is causing the IE CSS fix to fail in Internet Explorer 8? The IE statement does not seem to end properly

Greetings! I recently attempted to implement an IE fix on my website, however, it seems that it is not effective for IE8. Should I provide more specific instructions? <!--[if IE]> <link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12 ...

cssinternet-explorer-8if-statement

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Scenario I am working on a web page where I want the background image to be fixed, covering the entire screen or window (excluding tablets and smartphones). The background image has been created using ImageShack. Everything is running smoothly so far. T ...

javascriptjqueryhtmlcssretina

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - How can I achieve this effect on ion-card? Here is my HTML code - <ion-grid> ...

cssangularionic-frameworkionic3

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss