css tables out of alignment with bootstrap

Question

I've sliced up a bunch of images in Photoshop and exported the slices with the css table mark-up. The css works fine, placing each slice in the correct position, that is, until the bootstrap css file is added to the page. This causes some of the images go out of alignment on a desktop browser but not on a mobile device.

Here's an example of a table that looks fine, until bootstrap.css is placed in the head of the document. In this instance, it's just 1 image, image #3 that's out of alignment (4 pixels down with bootstrap 3, and 6 pixels down with bootstrap 4).

Without Bootstrap

div.Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:340px;
}

div.jyd-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:68px;
}

div.jyd-02 {
	position:absolute;
	left:0px;
	top:68px;
	width:67px;
	height:71px;
}

div.jyd-03 {
	position:absolute;
	left:67px;
	top:68px;
	width:57px;
	height:15px;
}

div.jyd-04 {
	position:absolute;
	left:124px;
	top:68px;
	width:148px;
	height:71px;
}

div.jyd-05 {
	position:absolute;
	left:67px;
	top:83px;
	width:57px;
	height:56px;
}

div.jyd-06 {
	position:absolute;
	left:0px;
	top:139px;
	width:42px;
	height:201px;
}

div.jyd-07 {
	position:absolute;
	left:42px;
	top:139px;
	width:28px;
	height:24px;
}

div.jyd-08 {
	position:absolute;
	left:70px;
	top:139px;
	width:51px;
	height:201px;
}

div.jyd-09 {
	position:absolute;
	left:121px;
	top:139px;
	width:27px;
	height:23px;
}

div.jyd-10 {
	position:absolute;
	left:148px;
	top:139px;
	width:124px;
	height:115px;
}

div.jyd-11 {
	position:absolute;
	left:121px;
	top:162px;
	width:27px;
	height:178px;
}

div.jyd-12 {
	position:absolute;
	left:42px;
	top:163px;
	width:28px;
	height:177px;
}

div.jyd-13 {
	position:absolute;
	left:148px;
	top:254px;
	width:24px;
	height:86px;
}

div.jyd-14 {
	position:absolute;
	left:172px;
	top:254px;
	width:100px;
	height:86px;
}

body {
  background: yellow;
}

With Bottstrap

div.Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:340px;
}

div.jyd-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:68px;
}

div.jyd-02 {
	position:absolute;
	left:0px;
	top:68px;
	width:67px;
	height:71px;
}

div.jyd-03 {
	position:absolute;
	left:67px;
	top:68px;
	width:57px;
	height:15px;
}

div.jyd-04 {
	position:absolute;
	left:124px;
	top:68px;
	width:148px;
	height:71px;
}

div.jyd-05 {
	position:absolute;
	left:67px;
	top:83px;
	width:57px;
	height:56px;
}

div.jyd-06 {
	position:absolute;
	left:0px;
	top:139px;
	width:42px;
	height:201px;
}

div.jyd-07 {
	position:absolute;
	left:42px;
	top:139px;
	width:28px;
	height:24px;
}

div.jyd-08 {
	position:absolute;
	left:70px;
	top:139px;
	width:51px;
	height:201px;
}

div.jyd-09 {
	position:absolute;
	left:121px;
	top:139px;
	width:27px;
	height:23px;
}

div.jyd-10 {
	position:absolute;
	left:148px;
	top:139px;
	width:124px;
	height:115px;
}

div.jyd-11 {
	position:absolute;
	left:121px;
	top:162px;
	width:27px;
	height:178px;
}

div.jyd-12 {
	position:absolute;
	left:42px;
	top:163px;
	width:28px;
	height:177px;
}

div.jyd-13 {
	position:absolute;
	left:148px;
	top:254px;
	width:24px;
	height:86px;
}

div.jyd-14 {
	position:absolute;
	left:172px;
	top:254px;
	width:100px;
	height:86px;
}

body {
  background: yellow;
}

I can fix the inexplicable misalignment by changing the css to top:64px except that it will then be misaligned on a mobile device.

A similar thing happens on every single table I've exported. I can't seem to find anything on the issue. I guess I must be the only person still using Photoshop sliced tables and trying to do so with Bootstrap. But I have my reasons. Thanks in advance.

yunzen · Accepted Answer

The Bootstrap changes the line-height and font-size of the body element, which is inherited. This is problematic on the small images, as one line—which the image is part of—will be higher than the image.

Setting the line-height to zero on the image container divs solves your issue

div.Table_01,
div.Table_02,
div.Table_03,
div.Table_04,
div.Table_05,
div.Table_06,
div.Table_07,
div.Table_08,
div.Table_09,
div.Table_10,
div.Table_11,
div.Table_12,
div.Table_13,
div.Table_14 {
  line-height: 0;
}

div.Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:340px;
}

div.jyd-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:272px;
	height:68px;
}

div.jyd-02 {
	position:absolute;
	left:0px;
	top:68px;
	width:67px;
	height:71px;
}

div.jyd-03 {
	position:absolute;
	left:67px;
	top:68px;
	width:57px;
	height:15px;
}

div.jyd-04 {
	position:absolute;
	left:124px;
	top:68px;
	width:148px;
	height:71px;
}

div.jyd-05 {
	position:absolute;
	left:67px;
	top:83px;
	width:57px;
	height:56px;
}

div.jyd-06 {
	position:absolute;
	left:0px;
	top:139px;
	width:42px;
	height:201px;
}

div.jyd-07 {
	position:absolute;
	left:42px;
	top:139px;
	width:28px;
	height:24px;
}

div.jyd-08 {
	position:absolute;
	left:70px;
	top:139px;
	width:51px;
	height:201px;
}

div.jyd-09 {
	position:absolute;
	left:121px;
	top:139px;
	width:27px;
	height:23px;
}

div.jyd-10 {
	position:absolute;
	left:148px;
	top:139px;
	width:124px;
	height:115px;
}

div.jyd-11 {
	position:absolute;
	left:121px;
	top:162px;
	width:27px;
	height:178px;
}

div.jyd-12 {
	position:absolute;
	left:42px;
	top:163px;
	width:28px;
	height:177px;
}

div.jyd-13 {
	position:absolute;
	left:148px;
	top:254px;
	width:24px;
	height:86px;
}

div.jyd-14 {
	position:absolute;
	left:172px;
	top:254px;
	width:100px;
	height:86px;
}

body {
  background: yellow;
}

css tables out of alignment with bootstrap

Answers (1)

Related Questions