The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately.

I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up messing with some of my CSS, but not all of it.

I delved into the issue and found some advice about potential misspellings between my id tags and .css # tags.

Despite the hiccup, a small piece of JavaScript is still functioning properly for me. My two divs are working smoothly, allowing users to scroll while the submit button remains visible.

Unfortunately, I'm losing my CSS styling for the table and home button. It's all tied up in some old-school ASP code, which may be contributing to the problem since I'm more accustomed to using ASP.NET.

<%
    Set Cn = Server.CreateObject("ADODB.Connection")
    Cn.Open CnString
    ' Build Sql.
    Sql = "SELECT [USER_CODE],[WINDOWS_ID], [FIRST_NAME], [LAST_NAME], [ACTIVE_IND] FROM      FSUSER ORDER BY [LAST_NAME]"
    ' Open recordset.
    Set Rs = Cn.Execute(Sql)
    If Not Rs.Eof Then arrayActiveUsers = Rs.GetRows()
    Rs.Close
    Set Rs = Nothing
    Response.Write "<form action='main1.asp' method='post'>"
    Response.Write "<div id=""top"">"
    Response.Write "<button name=""regions1"" type=""submit"" value="&regions&" >Save_"&regions&"</button>"
    Response.Write "<a href=""default.asp"" id=""home"" onclick=""return confirm('Have you saved your changes before leaving this page?');"" >Home</a>"
        Response.Write "</div>"
    Response.Write "<div id=""bottom"">"
    Response.Write "<table id=""table1"">"
    Response.Write "<tr>"
    Response.Write "<td>User Code</td>"
    Response.Write "<td>Windows ID</td>"
    Response.Write "<td>First Name</td>"
    Response Write "<td> Last Name</td>"
    Response.Write "<td> Status</td>"
    Response.Write "<td> ACTIVATE</td>"
    Response.Write "<td> DE-ACTIVATE</td>"
    Response.Write "</tr>"

    Response.Write "<tr>"
For j = 0 To UBound(arrayActiveUsers,2)
if arrayActiveUsers(4,j) = 1 then
        Response.Write "<td>" & arrayActiveUsers(0,j) & "</td>" 
        Response.Write "<td>" & arrayActiveUsers(1,j) & "</td>"
        Response.Write "<td>" & arrayActiveUsers(2,j) & "</td> "
        Response.Write "<td>" & arrayActiveUsers(3,j) & "</td>"
        Response.Write "<td ><font color=""green"">Active</font></td>" 
        Response.Write "<td></td>" 
        Response.Write "<td><input type=""checkbox"" name=""active"" value="  & arrayActiveUsers(0,j) &" /></td>"

Response.Write "</tr>"  
else    
        Response.Write "<td>" & arrayActiveUsers(0,j) & "</td>"
        Response.Write "<td>" & arrayActiveUsers(1,j) & "</td>" 
        Response.Write "<td>" & arrayActiveUsers(2,j) & "</td> " 
        Response.Write "<td>" & arrayActiveUsers(3,j) & "</td>"
        Response.Write "<td><font color=""red"">Not Active</font></td>" 
        Response.Write "</td>" & "<td><input type=""checkbox"" name=""de- active"" value=" & arrayActiveUsers(0,j) &"  /></td>" 
        Response.Write "<td></td>"

        Response.Write "</tr>"
end if
next
Response.Write "</table>"
Response.Write "</div>"
Response.Write "</form>"
 Cn.Close
 Set Cn = Nothing
 %>

Here is the HTML header:

<!DOCTYPE html>
<HTML>
<HEAD>
  <link rel="stylesheet" type="text/css" href="main1.css">
<TITLE> Main </TITLE>
   <script type="text/javascript">
            function greeting(){
                alert("Have you committed all your data?")
            }
      </script>
</HEAD>
<BODY>

And this is the CSS being used:

#top{
top:0;
position:fixed;
background: white;
}

#bottom{
margin-top:40px;
}

#home{
display: inline;
width: 115px;
height: 24px;
background: #E6E6E6;
padding: 0px;
text-align: center; 
border-width:2px;
border-style:ridge; 
border-color: gray;
color: black;    
}

#table1{
padding:3;
border:groove,2px,#f0f0f0;
background-color:a0a0a0;

}

If anyone spots any glaring errors that I missed, please let me know. I understand that the CSS might appear differently on IE compared to other browsers, but if we can get it working, maybe I can create separate style sheets for IE and everything else.

I should mention that I've tried multiple doctypes with the same result.

Answer №1

It's uncertain if this is the underlying cause of the issue, but <!DOCTYPE html> appears to be specific to HTML5 and it may not be what you're aiming for.

If you want to ensure better compatibility without using frames in an HTML4 environment, consider using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Answer №2

To provide more assistance, it would be helpful if you could create a jsfiddle with your final HTML so we can test it. The issue may be caused by poorly written CSS or a problematic HTML tag that has not been properly closed.

It's important to note that the DOCTYPE declaration is always required. Without it, browsers may render the site differently and cause inconsistencies in how styles are applied, especially in older versions of IE. This could result in your site looking fine in one browser but terrible in others. Fixing the styles may require rewriting all of your CSS if it was originally created using bad standards, similar to building a house on unstable ground.

Answer №3

Dealing with a similar problem, I decided to take the following steps:

  1. After reviewing all the pages on the site, I opted to create a single include file (doctype.asp) instead of declaring the DOCTYPE for each page.
  2. The contents of this file are as follows:

    <!DOCTYPE html >
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8         lt-ie7" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
    <!--[if gt IE 8] ><!--> <html class="no-js" xmlns:fb="http://ogp.me/ns/fb#"> <!--<![endif]-->
    
  3. By ensuring that all pages use the same DOCTYPE declaration, I was able to resolve any CSS issues across the entire site.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a li active shape involves defining styles for the active state of

I'm having trouble creating a shape in the menu header to show that it's selected with an active class. I've been struggling to bring the shape up and align it properly. Here is what I have attempted: HTML <li class="active"&g ...

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

Is it possible to disregard text formatting in Python when using Selenium?

I am experiencing an issue when trying to compare a name from my name string to a name in a webelement. For instance: Name format in my namestring (scraped from a website): Mcburnie Name in webelement: McBurnie The Xpath matching fails because the webe ...

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

I've been searching online for a while now, but I haven't been able to find a solution that fits my needs. What I'm trying to do is space out 4 divs equally, each with a width of 25% minus the margin. The challenge is ensuring that the last ...

What are some key considerations for creating a website that is optimized for printing?

I am working on creating a website filled with content that I want to optimize for printing. My goal is to have the content easily printable without any unnecessary elements like navigation or advertisements. To achieve this, I am considering using two sep ...

Creating a stylish button using Bootstrap in an MVC Core HTML Tag Helper

I recently scaffolded a table in MVC and created a view. I would like to customize the Edit button by changing it to a blue Bootstrap button. How can I accomplish this? Existing Code: <td> <a asp-action="Edit" asp-route-id="@ ...

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

What could be causing the space under every row in my CSS? I am currently developing a tic-tac-toe application using Next.js to enhance my skills. However, I have encountered an issue with the CSS where there appears to be a small space underneath each bo ...

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

Interactive HTML Table in PHP Email

I am curious to know if it is possible to include a user-defined function in PHP Mail. $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceabb6afa3bea2ab8eabb6afa3bea2abe0ada1a3">[email protected]</a>"; $mess ...

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

Troubleshooting Problems with CSS Three-Column Layout

Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am attempting to increase the width of my dialog box while also adding horizontal middle borders. It seems that my bootstrap for the site does not include these elements. How can I rectify this issue? Here is my code: $(document).ready(function() { ...

Text directly in the middle

Explanation In an attempt to replicate the "middle centered text" feature, such as "Responsive Front-end Development," on this website, I am currently exploring various methods. As a newcomer to web development, I have searched for templates to provide me ...

Using jQuery, inject code and text into an element

There's a situation where I have an array with exactly 3 entries. First Entry: <i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i> ...

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...