CODEWITHSUNDEEP
asp.netcss
Arun
Arun

Reputation: 738

two css files are conflict

My CSS3 Menu Bar is conflicting with the bootstrap.min.css

If I remove the bootstrap css then menu bar looks like below

enter image description here

Once bootstrap menu is added then it become like below

enter image description here

Instead of alphabet letters such as Menu1, Menu2, I m using some images on the menu. Because of CSS conflict, menu images comes below the menu border line. I got the image like below (but I want the image should be in center)

enter image description here

<link rel="stylesheet" type="text/css" href="Style/css3menu1/style.css" />
<link href="Style/vTab/bootstrap.min.css" rel="stylesheet" />

I have linked the both css like above and copied those codes in jsfiddle. I could not find the conflicting part in the CSS. Can anyone please help me. jsfiddle sample is here... https://jsfiddle.net/w3jz075t/

Upvotes: 4

Views: 4399

Answers (3)

Arun
Arun

Reputation: 738

I could not reverse the order due to Master page & content page. Finally I have concluded with the issue and identified the conflict code in bootstrap css, its below

/*
@media print
{
*
{
text-shadow:none!important;
color:#000!important;
background:transparent!important;
box-shadow:none!important
}

a,a:visited
{
text-decoration:underline
}
a[href]:after
{
content:" (" attr(href) ")"
}
*/

really I dont know what they did and how they are root cause for the issue but if I comment those lines then my menu bar places correctly. Thank you all for your support.

Upvotes: 0

toerd
toerd

Reputation: 99

Have you tried linking the css files like this:

<link href="Style/vTab/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/css3menu1/style.css" />

(in reversed order)

so your css styles will apply after the bootstrap ones. Keep an eye on !important after some css properties when troubleshooting with the dev tools!

Good Luck!

Upvotes: 0

Damien
Damien

Reputation: 3362

The order in which you include your CSS files is important, they will load in that order.

If there's 2 lines that impact the same html element, the browser will take the one included last (except if you use the attribute !important).

Upvotes: 3

Related Questions