CODEWITHSUNDEEP
csstwitter-bootstrap-3stylesheetconflict
Mirsad Batilovic
Mirsad Batilovic

Reputation: 441

Conflict bootstrap css with other css stylesheets

I have a problem with combining few css stylesheets with bootstrap. I found that this piece of bootstrap css code make me a problem.

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

When I comment this code my css menu and slide images works fine but then other elements with bootstrap classes look weird. All stylsheets are included after bootstrap.

This is my image slider css code in featured.css and looks OK when I comment code above, which is located in a bootstrap stylsheet

#featured { 
	width:870px;
	padding-right:280px; 
	position:relative; 
	border:10px solid #141b1b; 
	height:420px; 
	background: #D3D3D3;
}
#featured ul.ui-tabs-nav { 
	position:absolute; 
	top:0; left:835px; 
	list-style:none; 
	padding:0;
	margin-left:0;
	margin-top: 0;
	width:315px; 
	z-index: 100;
}
#featured ul.ui-tabs-nav li { 
	padding: 0; padding-left: 15px;
	margin: 0;
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img { 
	float:left;
	background: #FFF; 
	margin-right: 5px;
	padding: 4px; 
	border:1px solid #999;
}
#featured ul.ui-tabs-nav li span { 
	font-size:11px; font-family:Verdana; 
	line-height:18px;
	width: 300px;

}
#featured li.ui-tabs-nav-item a { 
	display:block; 
	padding: 5px 5px;
	margin: 0;
	height: 60px; 
	color: #333;
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover { 
	background:#FFF; 
}
#featured li.ui-tabs-selected { 
	background: url(../images/slider_hover.png) no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a { 
}
#featured .ui-tabs-panel { 
	width:660px; height:350px; 
	background:#FFF; position:relative;
}
#featured .ui-tabs-panel .info { 
	position:absolute; 
	top:320px; left:0; 
	width: 850px;
	height:100px; 
	background: url('../images/transparent-bg.png'); 
}
#featured .info h2 { 
	font-size:18px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0;
	overflow:hidden; 
}
#featured .info p { 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; color:#f0f0f0;
}
#featured .info a { 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover { 
	text-decoration:underline; 
}
#featured .ui-tabs-hide { 
	display:none; 
}

Does anyone know how to solve this problem?

Upvotes: 0

Views: 1185

Answers (1)

jarasss
jarasss

Reputation: 528

Option 1. Maybe you should prefix your "additional classes" so they don't clash with bootstrap's? http://www.css-prefix.com/

Option 2. If you are sure that classes that clash are only those you mentioned I recommend doing something like that:

.your-css-menu-class-name {
    -webkit-box-sizing: content-box;  // this is default value
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

The best would be if you could create jsfiddle and show me full example http://jsfiddle.net/

Upvotes: 1

Related Questions