Work around for trouble with button width and text-decoration issues


#1


https://www.codecademy.com/courses/web-beginner-en-UuBLw/0/3?curriculum_id=50579fb998b470000202dc8b


Currently, when a user enters 120px for the width of the button as instructed, it will display an error telling the user that the width is currently set to an outrageous number (for me, it said 1664px).


Replace this line with your code. 
I have found that if you split up the div tags, it will work correctly. 
Example:
Setting up the code like similar to the following code causes an error about the width.
div{
 height: 50px;
 width: 120px
 border-color: #6495ED;
 background-color: #BCD2EE;
}

However, if you split up the divs like this
div{
 height: 50px;
 width: 120px
}
div{
 border-color: #6495ED;
 background-color: #BCD2EE;
}

It will work. I have used this to get around many of the text-decoration errors as well.


Weird error message... BUG?
#2

The instructions says: "Set your div's border-radius to 5px.

So you will write :

div {
    border-radius:5px;
}

*it's better to put all styles about div's together :

div {
    height:50px;
    width:120px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-radius:5px;
}

#3

You may be getting an issue because you don't have the semicolon after your width. Add that in and see if it works.

I've also heard that sometimes if your screen has any sort of zoom applied on it that it can get some issues with what the computer assumes the font is, so make sure you are just zoomed to 100%


#4

I appreciate the response.
I must have just missed the semi-colon when I retyped it here. Everything was correct and my zoom was perfectly fine...In fact, I adjusted the zoom when it wasn't working and I was getting closer to the correct width. The issue has been posted on here for a couple of years and seems to be a bug. On some occasions, my solution works and sometimes it doesn't. Also, sometimes switching browsers will work as well. I was having trouble with this and came here to find that others were as well, so I played around with it a bit and thought I'd post my workaround.

  • Josh

#5

Yes, something similar to that, though you don't need border-radius set in both areas. I can't say for 100% certainty that it will work. Just try different combinations of this or switch your browser. I have found some success using Mozilla instead of Chrome on some of the issues. It may even work if you separate the width and height and then keep all of the "border" stuff together.

  • Josh

#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.