Result tab looks weird


#1

2.taking up space

I didn't change other default css, only added this

*{
    display:block
    }

I passed, but it looks like this in the result tab.

Why is that?


#2

Rather than using the universal selector *{} I would suggest using div {} selector..

As per instructions it states to select all <divs>

Also if you could paste your html and css as code rather than picture I'll be able to better help.. :smiley:

EDIT: You should just add display: block on line 11 as I'm certain above that is the div{} selector


#3

html,

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
	</body>
</html>

my css,

* {
	border: 1px dashed blue;
}

div {
	height: 50px;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	/*Add your CSS here!*/
	
}

#one {
	background-color: #FF0000;
}

#two {
	background-color: #0000FF;
}

#three {
	background-color: #FFD700;
}

#four {
	background-color: #308014;
}
*{
    display:block
    }

I do saw people put display in div selector afterwards, well, I'm just wondering why can't the universal selector work?


#4

So by using the universal selector you're selecting everything to display as block..

Whilst it passes the test unit it isn't wise or recommended as you can achieve the preferred result by simply selecting all divs by using div {}..

Refresh the results after removing the universal selector and adding the display:block line to line 11 and see how it still passes yet looks much nicer..


#5

but the everything should meant the everything in the body of html, which is the four divs, isn't it?


#6

no, html and body are also valid css selectors, so your universal selector currently target: html, body and div


#7

Using google chrome's inspect tool it would appear by using the universal selector you're applying display: block to both the head, style and html.. thus why the code appears..


#8

applying display: block to everything is a really bad idea, it makes the title and css code show on the webpage


#9

Thanks, obviously I didn't correctly understand what universal selector would include.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.