Trouble formatting and displaying

前端未结

关注

 1  741

既然无缘 2021-01-23 23:15

I\'m still pretty new to coding so bear with me...I have read that different browsers display horizontal rules differently. I can\'t seem to get it right in Firefox or Chrome (o

1条回答

无人共我 (楼主)

2021-01-24 00:05

I have cleared float for the hr and removed the

@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* HTML5 display-role reset for older browsers */

ol, ul {
	list-style: none;
}

html {
	background-color:#96d5cd;
}


#container {
	width:980px;
	border:1px solid #1f5c54;
	background-color:white;
	margin:2em auto;
}

hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}

#footer {
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:14em;
}

#footer li {
display:inline;
}

#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}

#main #content {
margin-top:10px;
margin-left:10px;
margin-right:10px;
height:400px;
text-align:justify;
}

#nav {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-family: patua-one;
	margin-top: 40px;
	font-style: normal;
	font-weight: 400;
background-color:#fec161;
width:920px;
height:40px;
margin-left:10px;
} 

#nav li{
display:inline;

}

#nav li {
margin-left:0px;
}

#social {
float:right;
}

#social li {
margin-right:3.5px;
}

#social li{
display:inline;
}
a {
	text-decoration: none;
	color: black;
	margin-top: 0px;
	font-style: normal;
}

a:hover {
	text-decoration:none;
	color:#fff;
}

#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}


#footer {
	font-family:amaranth;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
}

#header {
	font-family:patua-one;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
	font-size:24px;
}

#header img {
	float:left;
margin-left:10px;
margin-top:10px;
}

h1 {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
padding-top:10px;
}

#column1 {
float:left;
width:275px;
margin-left:10px;
margin-right:30px;
text-align:justify;
}

#column2 h2{
float:left;
width:275px;
margin-left:90px;
}

#column2 {
float:left;
width:275px;
margin-right:0px;
text-align:justify;
margin-left:20px;
}


#column3 {
float:right;
width:275px;
margin-right:10px;
text-align:justify;
}

#column3 h2 {
	float:left;
	width:275px;
	margin-left:220px;
}

h2 {
	font-weight: 400;
	text-transform: uppercase;
	line-height: 100%;
	@import url(http://fonts.googleapis.com/css?family=Patua+One);
	font-family: patua-one;
	font-style: normal;
	font-size:24px;
}

#columns {
	margin-top:20px;
}

h3 {
font-family:amaranth;
}

div span.welcome {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
}
hr {
  clear: both;
}





WELCOME :: Katie J Hunter :: Graphic Designer















	
    

    
    

    
    
    	

        
        
    
    
    
    
Home :: 
    About :: 
    Services :: 
    Portfolio :: 
    
Blog :: 
    Contact
    
	

    
    
    
    	

    
    

    
    
    	
        Welcome!
        
        
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odi o nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.
		   

          
            
    Services
    
	Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.
    


    
     Clients
     
     	Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.
    


    
     Blog
     
     Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.
    

    	

    

    
    	
        © copyright 2015 katie j hunter • all rights reserved

        
    		Home | 
    		About | 
    		Services | 
    		Portfolio | 
    		Blog |
    		Contact

0 讨论(0)