2 replies [Last post]
Straikkeri
Straikkeri's picture
Offline
newbie
Last seen: 4 years 34 weeks ago
Timezone: GMT+2
Joined: 2016-02-23
Posts: 2
Points: 3

Hello!

I've been hammering away at my new works-page and today I implemented a bootstrap collapsible panel design for the navigation. I managed to tweak the tutorial stuff in to a form that works for my site. However, I hit a snag with a white line that appears at the top of every #body-content div in the menu.

Here's the site: http://student.labranet.jamk.fi/~H8951/portfolio/portfolio-dev.html

Here's the CSS, and I apologize for how messy both are it's a custom paintjob on a tutorial and the css is a disaster of me trying everything to get rid of the line:

* {margin: 0}
 
a {
	color:orange;
}
 
header {
	background: #232526;
	color: #B8B8B8;
	height: 6.3%;
	width: 98%;
	border-radius: 10px;
	border: 1px solid black;
	margin: 1%;
	background: linear-gradient(to top, #000000, #424546);
  	/* border: 1px solid white; */
 	}
 
#inner_header {
	/*background: #484848;*/
	background: linear-gradient(to top, #1E1E1E, #4D5355);
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	margin: 1%;
	border-radius: 5px;
	/* border: 1px solid blue; */
}
 
#inner_header p {
	display: inline;
}
 
#inner_header h1 {
 
}
body h1 {
	padding-left: 1%;
	padding-top: 1%;
}
 
li {
    display: inline;
}
 
p, h1, h2 {
	color: #B8B8B8;
	font-family: 'Open Sans Condensed', sans-serif;
}
 
#button1, #button2, #button3, #button4, #pressed_button{
	display: inline;
	padding: 0.5% 1%;
	border-left: 1px solid black;
	/* border: 1px solid yellow; */
}
 
.buttonClass:hover { cursor: pointer; cursor: hand; }
 
#button4 {
	border-right: 1px solid black;
}
 
#pressed_button {
	background: #000000;
}
 
body {
	background: #232526; /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #000000 , #6D7274); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #000000 , #424546); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-attachment: fixed;
	background-size: 100%;
	/* border: 1px solid red; */
	margin-left: 15%;
	margin-right: 15%;
	/*#232526*/	
	height:98vh;
}
 
#page-wrapper{
 	/* border: 1px solid white; */
 	height: 100%;
}
 
#content-wrapper{
	maring-top: 2%;
	margin-left:2%;
	margin-right:2%;
	/*height: 50%;*/
	width: 96%;
	/*border: 1px solid red;*/
}
 
#sidebar{
	border-radius: 5px;
	background: linear-gradient(to top, #212121, #2E2E2E);
	width: 33%;
	padding: 0.5%;
	/*border: 1px solid yellow;*/
}
 
#inner-sidebar{
	margin: 2%;
	background-color: #212121;
	/*border: 1px solid red;*/
	border-radius: 5px;
}
 
#content {
	border-radius: 5px;
	background: linear-gradient(to top, #212121, #2E2E2E);
	height: 100%;
	width: 66%;
	/*border: 1px solid yellow;*/
	float:right;
}
 
#inner-content {
	margin: 1%;
	background-color: #212121;
	/*border: 1px solid red;*/
	border-radius: 5px;
}
 
#footer{
/* background: #232526; */
	color: #B8B8B8;
	height: 6.3%;
	width: 98%;
	border-radius: 10px;
	border-top: 2px solid #424546;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	background: linear-gradient(to top, #212121, #2E2E2E);
	/* border: 1px solid red; */
}
 
#inner-footer{
	background: linear-gradient(to top, #212121, #4D5355);
	padding-top: 0.5%;
	padding-bottom: 0.7%;
	padding-left: 20%;
	margin: 1%;
	border-radius: 5px;
	/* border: 1px solid yellow; */
}
 
#containerid{
	width: 100%;
	background-color: #212121;
}
 
.innerCollapsible{
	/*border: 1px solid red;*/
	background-color: #212121;
	border: 0px;
}
 
.panel-body {
	background-color: #212121;
	border: 0px;
}
 
.testicollapsible {
	/*border: 1px solid yellow;*/
	border: 0;
	padding: 0;
	margin: 0;
	height: 101%;
}
 
.outerCollapsible{
	padding:0%;
	margin-left: 10%;
	background-color: #212121;
}
 
.panel-group {
	margin:0%;
	padding:0%;
	background-color: #212121;
	border: 0px;
}
 
.collapse{
	margin:0%;
	padding:0%;
	background-color: #212121;
	border: 0px;
	/*border-top: 1px solid red;*/
}
 
.panel{
	border: 0px;
	margin:0%;
	padding:0%;
	background-color: #212121;
	border: 0px;
}
 
 
.panel-default {
	margin:0%;
	padding:0%;
	background-color: #212121;
	border: 0px;
}
 
.panel > .panel-heading {
	background: linear-gradient(to top, #1E1E1E, #4D5355);
	/*background-color: #212121;*/
	/*border: none;*/
	/*background-image: none;*/
	/*background-color: red;*/
	color: orange;
	border: 0px;
}
 
.innerHeading {
	padding: 1.5%;
}
 
@media screen and (max-width:1000px) {
		#footer{display:none;}
		#aside_wrapper{display:none;}
		body {
			margin-left: 0%;
			margin-right: 0%;}
		header {width: 68%;
				margin-left: 10%;
				margin-right: 10%;}
		#page-wrapper h1 {
			margin-left: 10%;}
		#boxwrapper{margin-left: 10%;
					margin-right: 10%;}
		#inner_header {padding-right:33%;
						padding-left:33%;}
}

Things I've tried:
- setting the border values for everything closely and even loosely related to 0px;
- tried to overlap it with a border with the right color
- setting the background color of everything related to the same dark color.
- tried to reset every possible padding and margin, messed around with height values etc.
- went through the http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css for the bootstrap panel and tried to trace the default styling for it to find the "bug"

I can't for the death of me figure out what's causing it or how to remove it.

I figured out tho, that if I put a border on the #body-content, it overlaps perfectly with the white line. However, setting border-top for another color does not appear and the white overlaps it.

I'm in need of some css magic to get that bugger hidden or removed. Can you guys help me? Thank you very much.

Straikkeri
Straikkeri's picture
Offline
newbie
Last seen: 4 years 34 weeks ago
Timezone: GMT+2
Joined: 2016-02-23
Posts: 2
Points: 3

I have no idea how to edit

I have no idea how to edit this since this forum layout is terribad, but problem SOLVED! Found the line using chrome's inspect element, turns out it was a border-top white that disregarded my border: 0; Setting !important after it fixed the whole thing. Thank you for your time!

//mod edit: I deleted your duplicate post. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Good, you found it

I took a look-see but couldn't find the conflict in my, admittedly cursory, inspection.

That you need to use !important indicates there is a specificity issue that you need to find. It is unfortunate that you're using bootstrap, as it is very poorly designed and implemented; not to mention completely unnecessary for its stated purpose/s/.

Regarding user edits, that was eliminated many years ago due to misuse1. Simply post a reply to the post you want correct or add to.

cheers,

gary

1. The most egregious issue was folks posting code for others to inspect, then when a solution was found, they'd delete the code, making the topic thread meaningless. Since the purpose of a forum like this is to share the knowledge, the edit broke the paradigm.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.