Problem in CSS styling for the same div tag called twice. Behaves differently

Question

This is somewhat a very peculiar situation to me. Am not sure yet as to why this is happening but here goes. I have a particular div tag with class="sidehead" This class has some style attached as shown below

<style>
.sidehead {
background: none  scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>

Now the purpose of this div is style the header of every item in the sidebar. however when I add 2 back to div's the blue color gets smeared over the previous div also. I am not sure as to why this is happening.

You can check the flawed effect on http://mashup2.sunnydsouza.com. Just check the sidebar and you will realize what i am talking about. The 2 items I am talking about are fetched using include() statements in php. They are the same scripts called twice.

 echo '<div class="sidehead">Most Popular articles</div>';

    include('widget_2.php'); 

    echo '<br>';

    echo '<div class="sidehead">Random articles</div>';

    include('widget_2.php');

Can someone please help me solve this problem. Dunno why the blue color spreads over the first div also :(

Your CSS comment is incorrect: It should be /*border-radius...*/ not // — Kyle
– Kyle, Commented Aug 11, 2011 at 17:12

Jason Gennaro · Accepted Answer · 2011-08-11 17:27:26Z

2

It appears the problem is related to the floated items under the headings.

Try making that br one that clears, eg. <br style="clear:both">.

echo '<div class="sidehead">Most Popular articles</div>';

    include('widget_2.php'); 

    echo '<br style="clear:both">'; //CHANGE HERE

    echo '<div class="sidehead">Random articles</div>';

    include('widget_2.php');

This works for me when I change it in the inspect element console with Chrome.

enter image description here

edited Aug 11, 2011 at 17:27

answered Aug 11, 2011 at 17:16

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Battle Over a year ago

Alternatively, he could add the clear:both to his sidehead class to achieve the same effect.

cyrotello · Accepted Answer · 2011-08-11 17:24:34Z

1

Each of the elements brought in by your include statements have a style of 'float: left'. Removing them, (under 'Most Activities' and 'Recent') does the trick.

answered Aug 11, 2011 at 17:24

cyrotello

7479 silver badges26 bronze badges

Comments

Gapton · Accepted Answer · 2011-08-11 17:25:35Z

I examined it quickly, though I did not pin-point the exact error, I notice a lot of things you can do in order to improve code quality and ease debugging your error.

Firstly, <center> is, I believe, deprecated. Use <p align="center"> or use CSS instead.

Secondly, <br> is wrong, it should have been <br></br> , or alternatively <br />, although this is likely to be ignored by most browsers, it is not W3C compliant, and it is important to create a good habit.

Thirdly, your CSS is everywhere, this is bad. You see, there are three ways to do CSS, (1) inline <div style="some css here" > (2) external file <head> <link ...."yourCss.css" > </head> (3) document-wide <head> <style>some css here </style></head>

Avoid using all three methods, all mixed up, in different locations. Generally the best way is to use class and id to identify all elements you want to style, then have their css properties defined in an external CSS.

The problem seems to be CSS scope, the above methods each has different "scoping priority", so having them mixed up really complicate the priority of which style is applied to an element. Hope this helps.

anglimasS · Accepted Answer · 2011-08-11 17:16:56Z

0

//border-radius: 15px 15px 15px 15px;

above css style ignore

Use below

/*border-radius: 15px 15px 15px 15px;*/

Not sure but only css problem, its working

answered Aug 11, 2011 at 17:16

anglimasS

1,3442 gold badges16 silver badges41 bronze badges

Comments

Allan · Accepted Answer · 2011-08-11 17:17:54Z

0

Removing float:left; from the Most Popular Articles container worked for me in Firefox.

answered Aug 11, 2011 at 17:17

Allan

2,9392 gold badges27 silver badges38 bronze badges

Collectives™ on Stack Overflow

Problem in CSS styling for the same div tag called twice. Behaves differently

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related