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

Is applying a bevel effect when hovering achievable?

Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...

htmlcssalignmentbevelled

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...

htmlcssbootstrap-4

The issue with the search box not being correctly displayed on Google CSE using Twitter Bootstrap

Having an issue with the Google Custom Search (CSE) as it is not displaying the search box and button correctly. I am using Twitter Bootstrap v3.1.0. <script> (function() { var cx = '009077552906670546181:2ufng0dmsos'; ...

jquerycsstwitter-bootstrapgoogle-custom-search

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

css

How to prevent CSS styles from being overridden by SASS in a stylesheet

When working with a Sass file, I encountered an issue with the way styles were being output. The original style in the Sass file looked like this: .style{ width: calc(100%); } However, when compiled to its corresponding CSS file, the output was: .style{ ...

htmlcsssass

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

I am currently facing an issue where the sub-menu items are hidden behind the content in a bootstrap carousel. Despite everything else working fine, this particular problem is causing a headache. JSFiddle: https://jsfiddle.net/Saneesh/pwmyvsw6/65/ Is th ...

jqueryhtmlcsstwitter-bootstrapcarousel

What is the method for creating a curved CSS Pseudo element background?

Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...

csspseudo-element

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

htmlcss

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

javascriptjqueryhtmlcssfunction

Partial button clickability issue

There is a puzzling error where the button in the 'red area' is not clickable, and I can't seem to figure out why. Below are images illustrating the issue: https://i.stack.imgur.com/aPfcR.png https://i.stack.imgur.com/v5knZ.png Upon reac ...

htmlcssreactjsbuttonsass

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

javascriptjqueryhtmlcss

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Extend and retract within a row of a table

I need help with modifying a dynamically generated table to meet specific requirements. The table currently looks like this. The task involves hiding all columns related to Category B, eliminating duplicate rows for Category A, and displaying entries from ...

javascriptjquerycss

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

htmlcssvue.jsvuejs2vuetify.js

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

Using the combined power of CSS and jQuery to create dynamic visual effects based

Having some trouble figuring out why this code isn't functioning as expected... I've got a bunch of DIVs that have the class .rightColumnButton. Some of them currently have a height set to 30px: .rightColumnButton{ height:30px; width:206px; mar ...

jquerycssjquery-animate

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

htmlcsshtml-tableoverflow

Crafting an innovative horizontal CSS spotlight using conic-gradient styling

Seeking advice: I need to implement three spotlights on a webpage One shining directly downwards One angled from the left to the upper-top One angled from the right to the upper-top I managed to create a vertical spotlight using CSS conic-gradient, but I ...

htmlcsslinear-gradientsconic-gradients

Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I&apo ...

cssreactjsuser-interfacematerial-uijsx

Tips for adding an icon to an image using PHP and CSS

My goal is to create a responsive image gallery where each image has an icon or text that allows me to delete it if necessary. Here is my HTML and PHP code: <?php $sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'"; ...

phphtmlcsstwitter-bootstrapbootstrap-5