Redefinition warnings with responsive webdesign

  • (2 Pages)
  • +
  • 1
  • 2

24 Replies - 1482 Views - Last Post: 30 May 2016 - 11:56 AM

#1 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Redefinition warnings with responsive webdesign

Posted 28 May 2016 - 06:15 AM

I get a lot of redefinition warnings like these when running my site through the W3C CSS Validator:

.fa.fa-shopping-cart    Redefinition of font-size
.fa.fa-shopping-cart    Redefinition of height
.fa.fa-shopping-cart    Redefinition of line-height
.fa.fa-shopping-cart    Redefinition of width


The script for .fa.fa-shopping-cart looks like this:

.fa.fa-shopping-cart 
{
    color: #81D742;
    background-color: #F7F7F7;
    border: 2px solid #DCDCDC;
    display: inline-block;
    text-align:center;
    padding: 0px;
}

.fa.fa-shopping-cart:hover 
{
color: #7BAE23
}


And for each @media rule for different devices I've added different values for the .fa.fa-shopping-cart like this:

@media only screen and (min-width: 1024px)
.fa.fa-shopping-cart
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}


I therefore understand why I'm getting the redefinition warnings, but I'm wondering if it's possible to give the elements different values for different devices without getting these warnings?

I have been told that this isn't possible with pure css and that I have to write a jquery to do this, but how do I in that case do this?

Is This A Good Question/Topic? 0
  • +

Replies To: Redefinition warnings with responsive webdesign

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5552
  • View blog
  • Posts: 14,558
  • Joined: 18-April 07

Re: Redefinition warnings with responsive webdesign

Posted 28 May 2016 - 09:09 AM

One thing I want to bring up about your media query is that you should in fact surround your definitions with curly braces just so it knows the scope is under the media query itself.

@media only screen and (min-width: 1024px) { /*<--- Notice the opening brace */
.fa.fa-shopping-cart
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
} /*<--- Closing brace here */



Once I put in your CSS that you display here I receive a passing grade on the W3C CSS validator. My only guess right now is that it is saying you are redefining because it doesn't see your media query style being actually inside the media query. Add the extra curly braces and see if that helps.
Was This Post Helpful? 1
  • +
  • -

#3 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 05:36 AM

These changes made the warnings disappear, so thank you so much for that.
The only problem now is that the new changes gave me new errors like these:

Parse Error } { .fa.fa-check { font-size: 4em; border-radius: 120px; height: 120px; line-height: 120px; width: 120px; } }
Parse Error } { .fa.fa-check { font-size: 4em; border-radius: 120px; height: 120px; line-height: 120px; width: 120px; } }
Parse Error } { .fa.fa-check { font-size: 3em; border-radius: 110px; height: 110px; line-height: 110px; width: 110px; } }
Parse Error } { .fa.fa-check { font-size: 3em; border-radius: 100px; height: 100px; line-height: 100px; width: 100px; } }
Parse Error } { .fa.fa-check { font-size: 3em; border-radius: 100px; height: 100px; line-height: 100px; width: 100px; } }

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 07:02 AM

Seems like you've put brackets in the wrong place or have too many. Post the code section that it relates to, to give a fuller picture.
Was This Post Helpful? 0
  • +
  • -

#5 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 08:15 AM

With this code I get the redefinition warnings:

@media only screen and (min-width: 1024px) { 
div#container
{
   width: 1024px;
}
.fa.fa-check
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
.fa.fa-shopping-cart
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
.fa.fa-user
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
#PageHeader1
{
   height: 25px;
   visibility: visible;
}
#PageHeader1_Container
{
   width: 1024px;
}
#wb_Javascript1
{
   left: 0px;
   top: 950px;
   width: 280px;
   height: 250px;
   visibility: hidden;
   display: none;
}
#wb_Image5
{
   left: 50px;
   top: 62px;
   width: 238px;
   height: 76px;
   visibility: visible;
   display: inline;
}
#wb_CssMenu1
{
   left: 50px;
   top: 160px;
   visibility: visible;
   display: inline;
}
#wb_Line1
{
   left: 50px;
   top: 190px;
   visibility: visible;
   display: inline;
}
#wb_Text1
{
   left: 50px;
   top: 243px;
   width: 920px;
   height: 57px;
   visibility: visible;
   display: inline;
}
#wb_Text2
{
   left: 50px;
   top: 300px;
   width: 920px;
   height: 84px;
   visibility: visible;
   display: inline;
}
#SlideShow1
{
   left: 50px;
   top: 450px;
   width: 918px;
   height: 375px;
   visibility: visible;
   display: inline;
}
#SlideShow1_back
{
   left: 0px;
   top: 172px;
}
#SlideShow1_next
{
   left: 886px;
   top: 172px;
}
#wb_Extension1
{
   left: 140px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
#wb_Extension2
{
   left: 450px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
#wb_Extension3
{
   left: 760px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
#wb_Text3
{
   left: 50px;
   top: 1025px;
   width: 300px;
   height: 52px;
   visibility: visible;
   display: inline;
}
#wb_Text4
{
   left: 350px;
   top: 1025px;
   width: 320px;
   height: 26px;
   visibility: visible;
   display: inline;
}
#wb_Text5
{
   left: 670px;
   top: 1025px;
   width: 300px;
   height: 52px;
   visibility: visible;
   display: inline;
}
#wb_Text6
{
   left: 50px;
   top: 50px;
   width: 300px;
   height: 249px;
   visibility: visible;
   display: inline;
}
#wb_Text7
{
   left: 387px;
   top: 50px;
   width: 244px;
   height: 279px;
   visibility: visible;
   display: inline;
}
#wb_CssMenu2
{
   left: 50px;
   top: 160px;
   visibility: hidden;
   display: none;
}
#wb_Line3
{
   left: 20px;
   top: 360px;
   visibility: hidden;
   display: none;
}
#wb_Text9
{
   left: 20px;
   top: 400px;
   width: 280px;
   height: 46px;
   visibility: hidden;
   display: none;
}
#wb_Text8
{
   left: 20px;
   top: 450px;
   width: 280px;
   height: 260px;
   visibility: hidden;
   display: none;
}
#SlideShow2
{
   left: 70px;
   top: 680px;
   width: 898px;
   height: 367px;
   visibility: hidden;
   display: none;
}
#SlideShow2_back
{
   left: 0px;
   top: 168px;
}
#SlideShow2_next
{
   left: 866px;
   top: 168px;
}
#wb_Extension4
{
   left: 100px;
   top: 930px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
#wb_Extension5
{
   left: 450px;
   top: 880px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
#wb_Extension6
{
   left: 730px;
   top: 880px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
#wb_Line7
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
#wb_Line8
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
#wb_Line9
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
#wb_Text10
{
   left: 0px;
   top: -229px;
   width: 244px;
   height: 279px;
   visibility: hidden;
   display: none;
}
#wb_Line10
{
   left: 280px;
   top: 370px;
   visibility: visible;
   display: inline;
}
#wb_Line11
{
   left: 560px;
   top: 370px;
   visibility: visible;
   display: inline;
}
#wb_Line12
{
   left: 840px;
   top: 370px;
   visibility: visible;
   display: inline;
}
#wb_Line2
{
   left: 0px;
   top: 1520px;
   visibility: visible;
   display: inline;
}
#wb_CssMenu3
{
   left: 30px;
   top: 170px;
   visibility: hidden;
   display: none;
}
#wb_Line4
{
   left: 30px;
   top: 360px;
   visibility: hidden;
   display: none;
}
#wb_Text12
{
   left: 30px;
   top: 460px;
   width: 420px;
   height: 156px;
   visibility: hidden;
   display: none;
}
#wb_Text11
{
   left: 300px;
   top: 243px;
   width: 394px;
   height: 51px;
   visibility: hidden;
   display: none;
}
#wb_Text13
{
   left: 0px;
   top: 1011px;
   width: 420px;
   height: 189px;
   visibility: hidden;
   display: none;
}
#wb_Line18
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
#wb_Line19
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
#wb_Line20
{
   left: 0px;
   top: 50px;
   visibility: hidden;
   display: none;
}
#wb_Line22
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
#wb_Line23
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
#wb_Line24
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
#wb_Text15
{
   left: 30px;
   top: 297px;
   width: 710px;
   height: 112px;
   visibility: hidden;
   display: none;
}
#wb_Extension7
{
   left: 50px;
   top: 780px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
#wb_Extension8
{
   left: 330px;
   top: 790px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
#wb_Extension9
{
   left: 590px;
   top: 790px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
#wb_Text16
{
   left: 30px;
   top: 910px;
   width: 200px;
   height: 52px;
   visibility: hidden;
   display: none;
}
#wb_Text17
{
   left: 540px;
   top: 910px;
   width: 200px;
   height: 52px;
   visibility: hidden;
   display: none;
}
#wb_Text19
{
   left: 0px;
   top: 951px;
   width: 290px;
   height: 249px;
   visibility: hidden;
   display: none;
}
#wb_Line5
{
   left: 0px;
   top: 49px;
   visibility: hidden;
   display: none;
}
#wb_CssMenu4
{
   left: 30px;
   top: 190px;
   visibility: hidden;
   display: none;
}
#wb_Javascript2
{
   left: 50px;
   top: 1540px;
   width: 60px;
   height: 50px;
   visibility: visible;
   display: inline;
}
#wb_Javascript3
{
   left: 160px;
   top: 390px;
   width: 120px;
   height: 50px;
   visibility: visible;
   display: inline;
}
#wb_Javascript4
{
   left: 330px;
   top: 1540px;
   width: 60px;
   height: 50px;
   visibility: visible;
   display: inline;
}
#wb_Javascript6
{
   left: 0px;
   top: 950px;
   width: 250px;
   height: 250px;
   visibility: hidden;
   display: none;
}
#wb_Javascript5
{
   left: 0px;
   top: -200px;
   width: 500px;
   height: 250px;
   visibility: hidden;
   display: none;
}
#wb_Javascript8
{
   left: 700px;
   top: 50px;
   width: 270px;
   height: 270px;
   visibility: visible;
   display: inline;
}
#wb_Javascript7
{
   left: 0px;
   top: 950px;
   width: 280px;
   height: 250px;
   visibility: hidden;
   display: none;
}
#PageFooter1
{
   top: 1150px;
   height: 450px;
   visibility: visible;
}
#PageFooter1
{
   width: 100%;
}
#PageFooter1_Container
{
   width: 1024px;
}
}


And with this code the redefinition warnings disappear, but I get the parse errors instead:

@media only screen and (min-width: 1024px) 
{
div#container
{
   width: 1024px;
}
}
{
.fa.fa-check
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
}
{
.fa.fa-shopping-cart
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
}
{
.fa.fa-user
{
    font-size: 4em;
    border-radius: 120px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}
}
{
#PageHeader1
{
   height: 25px;
   visibility: visible;
}
}
{
#PageHeader1_Container
{
   width: 1024px;
}
}
{
#wb_Javascript1
{
   left: 0px;
   top: 950px;
   width: 280px;
   height: 250px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Image5
{
   left: 50px;
   top: 62px;
   width: 238px;
   height: 76px;
   visibility: visible;
   display: inline;
}
}
{
#wb_CssMenu1
{
   left: 50px;
   top: 160px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Line1
{
   left: 50px;
   top: 190px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text1
{
   left: 50px;
   top: 243px;
   width: 920px;
   height: 57px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text2
{
   left: 50px;
   top: 300px;
   width: 920px;
   height: 84px;
   visibility: visible;
   display: inline;
}
}
{
#SlideShow1
{
   left: 50px;
   top: 450px;
   width: 918px;
   height: 375px;
   visibility: visible;
   display: inline;
}
}
{
#SlideShow1_back
{
   left: 0px;
   top: 172px;
}
}
{
#SlideShow1_next
{
   left: 886px;
   top: 172px;
}
}
{
#wb_Extension1
{
   left: 140px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Extension2
{
   left: 450px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Extension3
{
   left: 760px;
   top: 890px;
   width: 120px;
   height: 120px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text3
{
   left: 50px;
   top: 1025px;
   width: 300px;
   height: 52px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text4
{
   left: 350px;
   top: 1025px;
   width: 320px;
   height: 26px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text5
{
   left: 670px;
   top: 1025px;
   width: 300px;
   height: 52px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text6
{
   left: 50px;
   top: 50px;
   width: 300px;
   height: 249px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Text7
{
   left: 387px;
   top: 50px;
   width: 244px;
   height: 279px;
   visibility: visible;
   display: inline;
}
}
{
#wb_CssMenu2
{
   left: 50px;
   top: 160px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line3
{
   left: 20px;
   top: 360px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text9
{
   left: 20px;
   top: 400px;
   width: 280px;
   height: 46px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text8
{
   left: 20px;
   top: 450px;
   width: 280px;
   height: 260px;
   visibility: hidden;
   display: none;
}
}
{
#SlideShow2
{
   left: 70px;
   top: 680px;
   width: 898px;
   height: 367px;
   visibility: hidden;
   display: none;
}
}
{
#SlideShow2_back
{
   left: 0px;
   top: 168px;
}
}
{
#SlideShow2_next
{
   left: 866px;
   top: 168px;
}
}
{
#wb_Extension4
{
   left: 100px;
   top: 930px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Extension5
{
   left: 450px;
   top: 880px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Extension6
{
   left: 730px;
   top: 880px;
   width: 120px;
   height: 120px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line7
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line8
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line9
{
   left: 20px;
   top: 355px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text10
{
   left: 0px;
   top: -229px;
   width: 244px;
   height: 279px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line10
{
   left: 280px;
   top: 370px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Line11
{
   left: 560px;
   top: 370px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Line12
{
   left: 840px;
   top: 370px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Line2
{
   left: 0px;
   top: 1520px;
   visibility: visible;
   display: inline;
}
}
{
#wb_CssMenu3
{
   left: 30px;
   top: 170px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line4
{
   left: 30px;
   top: 360px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text12
{
   left: 30px;
   top: 460px;
   width: 420px;
   height: 156px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text11
{
   left: 300px;
   top: 243px;
   width: 394px;
   height: 51px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text13
{
   left: 0px;
   top: 1011px;
   width: 420px;
   height: 189px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line18
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line19
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line20
{
   left: 0px;
   top: 50px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line22
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line23
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line24
{
   left: 0px;
   top: 1200px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text15
{
   left: 30px;
   top: 297px;
   width: 710px;
   height: 112px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Extension7
{
   left: 50px;
   top: 780px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Extension8
{
   left: 330px;
   top: 790px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Extension9
{
   left: 590px;
   top: 790px;
   width: 110px;
   height: 110px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text16
{
   left: 30px;
   top: 910px;
   width: 200px;
   height: 52px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text17
{
   left: 540px;
   top: 910px;
   width: 200px;
   height: 52px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Text19
{
   left: 0px;
   top: 951px;
   width: 290px;
   height: 249px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Line5
{
   left: 0px;
   top: 49px;
   visibility: hidden;
   display: none;
}
}
{
#wb_CssMenu4
{
   left: 30px;
   top: 190px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Javascript2
{
   left: 50px;
   top: 1540px;
   width: 60px;
   height: 50px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Javascript3
{
   left: 160px;
   top: 390px;
   width: 120px;
   height: 50px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Javascript4
{
   left: 330px;
   top: 1540px;
   width: 60px;
   height: 50px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Javascript6
{
   left: 0px;
   top: 950px;
   width: 250px;
   height: 250px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Javascript5
{
   left: 0px;
   top: -200px;
   width: 500px;
   height: 250px;
   visibility: hidden;
   display: none;
}
}
{
#wb_Javascript8
{
   left: 700px;
   top: 50px;
   width: 270px;
   height: 270px;
   visibility: visible;
   display: inline;
}
}
{
#wb_Javascript7
{
   left: 0px;
   top: 950px;
   width: 280px;
   height: 250px;
   visibility: hidden;
   display: none;
}
}
{
#PageFooter1
{
   top: 1150px;
   height: 450px;
   visibility: visible;
}
}
{
#PageFooter1
{
   width: 100%;
}
}
{
#PageFooter1_Container
{
   width: 1024px;
}
}

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 08:46 AM

Yes, count and match your brackets (braces). It would help if you indented at different levels rather than having all the braces lined up on the left. Particularly, it isn't clear whether rules are inside a media rule, or whether they should be.

At a glance lines 7 and 8 are wrong, and 17 and 18, etc..

Added: Gosh, you seem to have loose braces all over the shop ;)
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 09:05 AM

Here's an example:
@media only screen and (min-width: 1024px) {
    div#container {
       width: 1024px;
    }
} /* why is this here? Should it be? */
{ /* why is this here? Should it be? */
    .fa.fa-check {
        /* this is still within the media query */
        font-size: 4em;
        border-radius: 120px;
        height: 120px;
        line-height: 120px;
        width: 120px;
    }
} /* this signifies the end of the media query */

Was This Post Helpful? 0
  • +
  • -

#8 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 11:26 AM

But the first code that I posted where the redefinition warnings show up is correct?
That is the original one where I had braces wrapped around the whole media query.
I deleted these braces and put braces around each and every one of the definitions
because this made the warnings disappear, but this also caused all of the parse errors.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 11:58 AM

Parse errors are far more significant that redefinition warnings.

What's fa, Font Awesome? Is there another CSS file attached that contains the same selectors?

You could also inspect elements in your browser to see if it references two sets of rules, with one set scored through.
Was This Post Helpful? 0
  • +
  • -

#10 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 12:13 PM

Of course - So I'll just keep the original code,
but this takes me back to the start regarding the redefinition warnings.
Fa is Font Awesome and this is the stylesheet:

The elements references multiple sets of rules with some of them scored through.

I'm so sorry. This is the stylesheet.
It didn't show up on my last reply.
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 12:23 PM

Quote

The elements references multiple sets of rules with some of them scored through.

In Google Chrome, to the right of the rules, it identifies the name of the stylesheet. So is there more than one stylesheet referenced? In which case, the latest one referenced will overrule the earlier one(s) which use the same selectors.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 12:29 PM

Which validator are you using specifically? I don't get warnings if I happen to repeat the same selectors - I wouldn't really expect them either, it is how CSS is supposed to work, with later rules and settings superseding earlier ones. (Or perhaps the warnings only occur if the rules are in different attached stylesheets?)
Was This Post Helpful? 0
  • +
  • -

#13 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 12:42 PM

There are two references there.
One for the stylesheet that I linked to
and one for the html-file for the front page.
I'm using the W3C CSS Validator and the warnings occur every
time an element gets different values for different media queries.
Was This Post Helpful? 0
  • +
  • -

#14 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 12:51 PM

Does the HTML file for the front page contain (or link to) CSS rules?
Was This Post Helpful? 0
  • +
  • -

#15 Jeanette94   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 28-May 16

Re: Redefinition warnings with responsive webdesign

Posted 29 May 2016 - 01:26 PM

The HTML-file for the front page contains the link to the stylesheet
that I posted above and all of the code for the different media queries.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2