Problem in CSS styling for the same div tag called twice. Behaves differently
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
&l开发者_C百科t;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 :(
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.
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.
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.
//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
Removing float:left; from the Most Popular Articles container worked for me in Firefox.
加载中,请稍侯......
精彩评论